🕹️ Vaporwave Watermelon Theme & Icons — Full-Stack Web & UI/UX Edition

Vaporwave Watermelon Theme là sự kết hợp hoàn hảo giữa giao diện lập trình màu Pastel trầm dịu mắt (lấy cảm hứng từ Oh My Posh OS & Terminal) và bộ sưu tập 93 Icon thủ công độc bản phong cách Băng game Arcade 16-bit (Retro Synthwave Cartridge).

Đạt độ chuẩn mực cao nhất (10/10 Top-Tier Industry Standard), ngang tầm Dracula Theme về độ phủ màu syntax/workbench (300+ UI tokens), ngang tầm Material Icon Theme về khả năng nhận diện tech stack (93 icons, 800+ mappings), và vượt tầm Powerlevel10k (p10k) về terminal intelligence (time-of-day palette, kubectl, Java, .NET)!

📸 Visual Showcase

🖥️ VS Code Workspace

┌─────────────────────────────────────────────────────────────────────────────┐
│ Explorer                    │  App.tsx                                       │
│ ──────────────────          │  ─────────────────────────────────────────     │
│ 📂 [src]       Xanh thép   │  import { useState } from 'react'              │
│  ├📂 [components] Hồng đất │  // Comments — Xanh cổ vịt italic              │
│  ├📂 [api]     Cam đất      │  export const Card = ({ title, onClick }) =>  │
│  ├📂 [pages]   Hồng đất    │    <div className="p-4" onClick={onClick}>     │
│  ├📂 [public]  Xanh rêu    │      {/* JSX tags — Tím khói */}               │
│  ├📂 [types]   Xanh thép   │    </div>                                      │
│  └📂 [middleware] Cam đất  │                                                │
│                             │  interface Props {   // Hồng đất bold          │
│ ⚙️ vite.config.ts  ⚡      │    title: string     // Xanh rêu              │
│ 📜 .env.local    🔑        │    count: number     // Cam đất               │
│ 🐳 docker-compose.yml       │  }                                             │
│ 🌐 nginx.conf    🅽         │                                                │
│ 🏗️ terraform/    💎         │  const fetchData = async () => {              │
│ 📋 Makefile      🔧         │    // async/await — Hồng đất bold italic      │
│ ❄️ flake.nix     🌨️         │  }                                             │
└─────────────────────────────────────────────────────────────────────────────┘

🖥️ Terminal (Oh My Posh)

Dark Mode — retro-dark.omp.json

╭─  AnhhTuann  ~/project/awesome-app  main ↑2 ↓1  ⚡ npm run dev
   v20.10.0   3.11.5   1.21.0   🐳 desktop-linux  ⎈ prod::default
╰──  15:42  02/08

Light Mode — retro-light.omp.json

╭─  AnhhTuann  ~/project/awesome-app  main ↑2 ↓1  ⚡ npm run dev
   v20.10.0   3.11.5  RAM 45%  ⚡ 12s  🕔 09:30  📅 29/07
╰──  ⚡

🏆 So Sánh với Top-Tier Themes

Tiêu chí	Dracula	Material Icon	Powerlevel10k	Retro Dark
VS Code UI Tokens	~250	—	—	300+ ✅
Semantic Highlighting	✅	—	—	✅
ErrorLens + GitLens	✅	—	—	✅
Symbol Icons (Outline)	✅	—	—	✅
File Icons	—	~600	—	93 ✅
File Extension Mappings	—	~1500	—	800+ ✅
Dedicated Folder Icons	—	~60	—	21 ✅
OMP Dark + Light	—	—	Dark only	✅ Cả hai
Time-of-Day Color	—	—	❌	✅ 4 states
kubectl Segment	—	—	Plugin	✅ Built-in
Java + .NET Runtime	—	—	✅	✅
Git Detached HEAD	—	—	✅	✅ Red alert
Ahead/Behind Count	—	—	✅	✅ `↑N ↓N`
Auto Icon Sync	—	—	—	✅ Exclusive

🎨 1. Bảng Màu Chính (7 Pastel Tones)

Bộ theme sử dụng chính xác 7 tông màu được tinh chỉnh cho độ tương phản hoàn hảo trên nền đen xám ấm (#222033):

Thành phần (Syntax / Scope)	Mã màu	Tên màu	Ý nghĩa
Keywords / Tags / Import / Export	`#9B8EB8`	Tím khói	Core keywords (Bold Italic)
Functions / Methods / React Hooks	`#5F85B2`	Xanh thép	Logic handlers (Bold)
Strings / Regexp / Paths	`#7BAA7B`	Xanh rêu	Data & paths
Variables / JSX Props / CSS Vars	`#D4A352`	Vàng đồng	Git modified & props
Types / Classes / React Components	`#C7889A`	Hồng đất	OOP & JSX (Bold)
Numbers / Booleans / Constants	`#C47D57`	Cam đất	Execution time & constants
Comments / Docs / Markdown Links	`#60999A`	Xanh cổ vịt	RAM memory (Italic)

🕹️ 2. 93 Retro Arcade Icons

Design Principles (4 quy chuẩn)

Color Blocking: Solid palette fills, zero gradients
Chunky Silhouettes: 2.0–2.8px strokes, bold readable shapes
Negative Space Typography: Letters carved into color blocks (JS, TS, GO...)
Hard Shadow: 1px offset dark shadow = 3D button-press effect

Icon Coverage

21 Folder Icons src · components · api · middleware · assets · public · config · test · hooks · utils · store · docs · scripts · database · github · cloud · layout · pages · types · + 2 more

72 File Icons — 800+ file/folder/extension mappings covering:

Frontend: React/JSX, Next.js, Vue, Angular, Svelte, Astro, HTML, CSS/SCSS, Tailwind
Languages: JS, TS, Python, Ruby, Java, Kotlin, C++, C#, Go, Rust, PHP, Swift, Dart, Lua, Scala, Elixir
DevOps: Docker, Terraform, Kubernetes, Nginx, Makefile, NixOS
Data: SQL, Prisma, GraphQL, Proto/gRPC, CSV, Database
Config: JSON, YAML, TOML, ESLint, Prettier, Babel, Vite, Webpack
Security: PEM, Key, Cert · Archives: ZIP, TAR, GZ...

🖥️ 3. Oh My Posh Terminal Intelligence

File: `retro-dark.omp.json` (Dark Mode)

File: `retro-light.omp.json` (Light Mode) — Exclusive Feature!

Segments:

🖥️ OS — OS icon with Tím khói (#9B8EB8)
📂 Path — Folder với mapped home ~ → ⌂
🌿 Git Pro — Branch + ↑N ↓N ahead/behind + Staged/Modified/Untracked + 🔴 DETACHED HEAD
📦 Runtime Auto-detect — Node.js 🟢 · Python 🔵 · Go 🔵 · Rust 🟠 · Java 🔴 · .NET 🟣 · Docker 🔵 · kubectl ⎈
💾 RAM — Color shifts: Normal→Yellow→Red at 80%→90%
🔋 Battery — Green/Teal(charging)/Red(low)/Gold(medium)
⏱️ Execution Time — Shows only >300ms, Red if >5s
🕐 Time + Date — 4 color states by time-of-day + Weekend special

🌟 Exclusive "Time-of-Day" Palette: | Time | Color | Visual | |:---|:---|:---| | 6h–12h (Morning) | Gold #D4A352 | 🌅 Sunrise | | 12h–18h (Day) | Blue #5F85B2 | ☀️ Daytime | | 18h–22h (Evening) | Purple #9B8EB8 | 🌆 Sunset | | 22h–6h (Night) | Teal #60999A | 🌙 Night mode | | Sat/Sun (Weekend) | Pink #C7889A | 🎉 Weekend |

🤖 4. Auto-Sync Feature (Exclusive)

Khi bạn chọn màu Vaporwave Watermelon Theme, VS Code sẽ tự động áp dụng bộ icon Retro Dark Icons để đồng bộ trải nghiệm! Không cần bật tay hai lần.

🚀 Hướng Dẫn Cài Đặt

Bước 1: Cài đặt từ VSIX

Mở VS Code → Ctrl + Shift + X (Extensions)
Click ... → Install from VSIX... → Chọn vaporwave-watermelon-theme-1.5.0.vsix

Bước 2: Kích hoạt Color Theme

Ctrl + K, Ctrl + T → Chọn Vaporwave Watermelon Theme

Bước 3: Kích hoạt Icon Theme

Ctrl + Shift + P → File Icon Theme → Chọn Retro Dark Icons

Bước 4: Cài đặt Oh My Posh Terminal

# Dark mode (recommended)
oh-my-posh init pwsh --config 'retro-dark.omp.json' | Invoke-Expression

# Light mode (unique variant)
oh-my-posh init pwsh --config 'retro-light.omp.json' | Invoke-Expression

👨‍💻 Tác Giả & Bản Quyền

Tác giả: AnhhTuann
Giấy phép: MIT License
Icon Catalog: Xem file RETRO_ICON_THEME_CATALOG.md
Changelog: Xem file CHANGELOG.md

Vaporwave Watermelon Theme

AnhhTuann