🕹️ Retro Dark Theme & Icons — Full-Stack Web & UI/UX Edition

Retro Dark 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 56 Icon thủ công độc bản phong cách Băng game Arcade 16-bit (Retro Synthwave Cartridge).

Được đo ni đóng giày bởi Kỹ sư Frontend dành riêng cho những lập trình viên cày code xuyên đêm, đam mê React, Full-Stack Web, Firebase, Cloud DevOps và mong muốn không gian làm việc VS Code đạt độ thẩm mỹ 10/10!

📸 Màn Hình Trải Nghiệm Thực Tế (Visual Showcase)

Khi kích hoạt trọn bộ Retro Dark Theme + Retro Dark Icons kết hợp cùng terminal Oh My Posh, không gian làm việc của bạn sẽ đạt độ hài hòa tuyệt đối:

+-----------------------------------------------------------------------------------+
| 📂 [src] folder-src-retro.svg       |  ⚛️ App.tsx (React Component - Hồng Đất)     |
|   📂 [components] folder-components |  export const Card = ({ title, onClick })   |
|   📂 [api] folder-api-retro.svg     |    return <div className="p-4" onClick=...  |
| 🔒 package-lock.json (Lock Badge)   |---------------------------------------------|
| ⚙️ vite.config.ts (Lightning Bolt)  |  🔥 firebase.config.ts (Vàng Đồng & Xanh)   |
| 📜 .env.local (Gold & Red Badge)    |  const FIREBASE_API_KEY = import.meta.env;  |
| 🐳 docker-compose.yml (Container)   |  import { initializeApp } from "firebase";  |
+-----------------------------------------------------------------------------------+
| >_ Terminal (Oh My Posh Slanted Theme - Tím Khói / Xanh Thép / Vàng Đồng)         |
| ❯ ~/project   v20.10.0   main  ⚡ npm run dev                              |
+-----------------------------------------------------------------------------------+

• Màn hình chia đôi (Split View): Một bên là Code React Component nổi bật với các thẻ JSX màu Hồng đất (#C7889A), props màu Vàng đồng (#D4A352); một bên là cấu hình Firebase BaaS bôi đậm các biến môi trường bất đồng bộ.
• Thanh bên (Explorer): Biến thành một phòng máy Arcade thu nhỏ với các huy hiệu thẻ bài sắc nét, không tồn tại bất kỳ icon mặc định xấu xí nào!
• Terminal phía dưới: Tone màu đồng bộ hoàn hảo với Oh My Posh vát chéo cực ngầu!

🎨 1. Bảng Màu Chính (Syntax & Semantic Palette)

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 (#161420 / #181820 / #222033):

🕹️ 2. 4 Nguyên Tắc Thiết Kế Icon (Retro Arcade Principles)

Ở phiên bản v1.2.0, toàn bộ 56 icon được lột xác theo 4 quy chuẩn khắt khe để đạt độ sắc nét tuyệt đối trên Explorer của VS Code (dù ở kích thước siêu nhỏ 16x16 hay 22x22 pixel):

1. Color Blocking (Mảng màu sắc nét): Loại bỏ hoàn toàn gradient và bóng mờ (blur). Mỗi icon sử dụng các mảng màu đặc (solid color) nguyên chất từ palette của theme.
2. Chunky Silhouettes (Đường nét dày dặn): Đường viền (stroke) được nâng cấp lên mức 2.0px – 2.8px. Tối giản chi tiết nhỏ bên trong để giữ trọn hình khối nhận diện từ xa.
3. Negative Space Typography (Chữ khoét rỗng): Các icon chữ như JS, TS, H5, CS được dùng kỹ thuật khoét rỗng trên khối màu Vàng đồng (#D4A352) và Xanh thép (#5F85B2). Nền tối của VS Code (#161420) sẽ tự động lấp đầy phần rỗng, tạo tương phản 3D cực cao.
4. Hard Shadow (Bóng cứng 1px): Tất cả icon đều có lớp bóng cứng màu #100E18 dịch chuyển xuống dưới 1px và sang phải 1px, tạo cảm giác nút bấm vật lý trên tay cầm game 16-bit.

📂 3. Phạm Vi Bao Phủ Siêu Khủng (700+ Mappings)

Bộ icon tích hợp ánh xạ khổng lồ bao phủ 100% hệ sinh thái lập trình hiện đại, không để lọt bất kỳ file nào:

⚡ Huy hiệu Thư mục chuyên biệt (Folder Icons)

• src/, app/, core/, modules/ ➔ Retro Source Brackets < > (Xanh thép)
• components/, features/, atoms/, widgets/ ➔ Retro Atomic Blocks (Hồng đất)
• layouts/, views/, pages/, ui/, theme/ ➔ Retro UI Wireframe (Hồng đất)
• api/, services/, controllers/, routes/, graphql/, grpc/ ➔ Retro Server Network Nodes (Cam đất)
• db/, database/, models/, schemas/, prisma/, supabase/, drizzle/ ➔ Retro DB Cylinder (Xanh rêu)
• cloud/, deploy/, docker/, k8s/, terraform/, aws/, gcp/, vercel/ ➔ Retro Cloud Network (Xanh thép)
• hooks/, utils/, store/, redux/, context/, zustand/ ➔ Retro Anchor Hook, Wrench & State Cube
• .github/, .gitlab/, .git/, workflows/, actions/ ➔ Retro Git Workflow Nodes (Trắng ngà)
• tests/, specs/, e2e/, cypress/, playwright/, vitest/ ➔ Retro Test Flasks (Xanh cổ vịt)

🌐 Huy hiệu Ngôn ngữ & Framework Web

• React / Next.js / Vue / Angular / Svelte / Astro / Nuxt: Biểu tượng độc quyền chuẩn Retro Arcade.
• JS / TS / HTML / CSS / Tailwind / Vite / Node.js / Bun / Deno: Huy hiệu 3D sắc cạnh, rõ ràng từng điểm ảnh.
• Backend & Systems: Python, Java, C++, Go, Rust, PHP, SQL, Prisma, Docker, Git, Shell Script (.sh, .ps1), Khóa bảo mật (.lock, .env), Terraform, WebAssembly (.wasm).

🤖 4. Tính Năng Đồng Bộ Hóa Tự Động (Auto-Sync)

Bạn không cần phải bật tay hai lần! Nhờ logic thông minh trong extension.js:

• Ngay khi bạn chọn màu Retro Dark Theme, VS Code sẽ tự động áp dụng bộ icon Retro Dark Icons để đồng bộ trải nghiệm!
• Khi bạn chuyển sang theme khác, thiết lập icon của bạn sẽ được giữ nguyên không gây phiền toái.

🚀 Hướng Dẫn Cài Đặt & Sử Dụng

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

1. Mở VS Code -> Nhấn Ctrl + Shift + X (Tab Extensions).
2. Nhấn vào biểu tượng ... ở góc trên bên phải bảng Extensions -> Chọn Install from VSIX... -> Chọn file retro-dark-theme-1.2.0.vsix.

Bước 2: Kích hoạt Giao diện Màu (Color Theme)

1. Nhấn Ctrl + K, Ctrl + T (hoặc mở Command Palette F1 gõ Preferences: Color Theme).
2. Chọn Retro Dark Theme.

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

1. Mở Command Palette (F1 hoặc Ctrl + Shift + P) gõ Preferences: File Icon Theme.
2. Chọn Retro Dark Icons.
3. Chiêm ngưỡng toàn bộ thanh Explorer biến hình thành phòng máy Arcade! 🕹️🔥

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

• Tác giả: AnhhTuann
• Giấy phép: MIT License
• Khám phá chi tiết Icon: Xem file RETRO_ICON_THEME_CATALOG.md đính kèm trong gói cài đặt.