Day 03：【主題與圖示】精選 5 款超好看主題 (One Dark, Dracula) 與 File Icons 設定

💡 前言

工程師每天看著編輯器的時間動輒 6 到 8 小時以上，一個好的主題配色 (Color Theme) 與檔案圖示 (File Icon Theme)，不僅能讓視覺更加舒適、降低眼睛疲勞，還能大幅提升對程式碼結構與檔案類型的辨識速度。

今天 Day 03 我們就來幫 VS Code 進行「盛世美顏」，推薦 5 款全球最受歡迎的主題套件，並設定好看又實用的檔案圖示！

🎯 本篇重點

1. 如何更換 VS Code 主題與圖示
2. 精選 5 款極致美觀的主題配色
3. 熱門檔案圖示套件 (File Icons) 推薦
4. 快速切換主題的快捷鍵

🎨 1. 精選 5 款頂級主題套件

在 VS Code 左側工具列點擊 「擴充套件 (Extensions)」 圖示（或按下快捷鍵 Ctrl + Shift + X / Cmd + Shift + X），搜尋名稱即可一鍵安裝：

1. One Dark Pro
   • 風格：移植自經典編輯器 Atom 的經典深色配色。
   • 特色：色彩對比度極佳、語法高亮極為自然，是目前全球下載量最高的主題之一，非常適合長時間撰寫程式碼。
2. Dracula Official
   • 風格：暗紫色調的高對比暗色主題。
   • 特色：配色帶有些許吸血鬼風格的神秘紫與高飽和度螢光色，語法高亮極度鮮明，非常適合喜歡高對比度的開發者。
3. Night Owl
   • 風格：專門為夜貓子工程師設計的深藍色調。
   • 特色：由知名前端工程師 Sarah Drasner 設計，考慮了對色盲與低視力者的友善度，深藍背景對眼睛負擔極小。
4. Tokyo Night
   • 風格：源自東京夜晚霓虹燈光的靈感。
   • 特色：主色調為深藍紫色，搭配溫和的霓虹粉與霓虹藍語法高亮，整體質感精緻現代。
5. GitHub Theme
   • 風格：官方推出的 GitHub 經典配色。
   • 特色：包含 GitHub Dark、GitHub Light 等多種模式，如果你習慣了在 GitHub 上閱讀程式碼的感受，這款會讓你感到非常親切。

📂 2. 檔案圖示套件 (File Icons) 推薦

預設的檔案圖示較為單調，透過圖示套件，可以讓 HTML、CSS、JS、Python、JSON 等不同副檔名顯示對應的彩色 Logo，一眼就能辨識檔案類別。

• vscode-icons：老牌且極度豐富的圖示套件，支援種類最齊全。
• Material Icon Theme（強力推薦）：基於 Google Material Design 風格設計，圖示現代簡潔，資料夾也會根據名稱（如 node_modules、src、components）顯示專屬外觀！

⚙️ 3. 設定與快捷鍵操作

安裝完成後，如何套用與切換？

• 切換主題：

1. 按下快捷鍵 Ctrl + K 接著按 Ctrl + T（Mac 為 Cmd + K -> Cmd + T）。
2. 或按下 F1 輸入 Color Theme（色彩主題）。
3. 使用上下鍵即可即時預覽效果，按下 Enter 確定。

• 切換檔案圖示：

1. 按下 F1 輸入 File Icon Theme（檔案圖示主題）。
2. 選擇 Material Icon Theme 即可完成套用。