什麼是 Peacock？
Peacock 是一個非常實用的 VSCode 擴充套件，由 John Papa 開發。它的主要功能是讓你可以為不同的 VSCode 工作區設定不同的顏色主題，透過改變工作區的視窗顏色（包括狀態列、標題列、活動列等），讓你在同時開啟多個專案時能夠快速辨識當前正在工作的專案。
為什麼需要 Peacock？
如果你跟我一樣，經常需要同時處理多個專案，你一定遇過這些困擾：
- 🔀 在多個 VSCode 視窗間切換時，常常搞不清楚哪個視窗對應哪個專案
- 💥 不小心在錯誤的專案中編輯或執行程式碼
- 🎯 想要快速找到特定專案的視窗，但需要逐一檢視
Peacock 透過視覺化的顏色標記，完美解決了這些問題。每個專案都有自己獨特的顏色，一眼就能辨識。
主要功能
- 工作區顏色化：自訂狀態列、標題列、活動列等 UI 元素的顏色
- 預設配色庫：內建多種精心挑選的顏色主題
- 收藏顏色：可以建立自己的配色收藏清單
- 快速切換：透過指令面板快速更改工作區顏色
- 專案記憶：每個工作區的顏色設定會被記錄，重新開啟時自動套用
我的 Peacock 收藏配色
我用 AI 幫我產生一套以品牌和技術堆疊為主題的配色方案。這些顏色不僅視覺上容易辨識，也與對應的技術或品牌有直接關聯，讓我能更直覺地記憶和使用。
品牌主題色系
這些是知名科技品牌的代表色，當我在處理與這些平台相關的專案時特別好用：
| 顏色名稱 | 色碼 | 適用場景 |
|---|---|---|
| Airbnb Pink | #ff385c |
Airbnb 相關專案 |
| Amazon Orange | #ff9900 |
AWS 或 Amazon 服務整合 |
| Azure Blue | #007fff |
Azure 雲端專案 |
| Facebook Blue | #1877f2 |
Meta/Facebook 專案 |
| Google Blue | #4285f4 |
Google Cloud 或 Firebase 專案 |
| LinkedIn Blue | #0a66c2 |
LinkedIn 整合專案 |
| Netflix Red | #e50914 |
串流媒體相關專案 |
| Spotify Green | #1db954 |
音樂或音訊相關專案 |
| Tesla Red | #e82127 |
IoT 或電動車相關專案 |
| Twitter Blue | #1da1f2 |
社群媒體專案 |
程式語言與框架色系
這是我最常用的部分！根據專案使用的主要技術堆疊選擇對應顏色：
前端技術
- React Blue (
#61dafb) - React 專案 - Vue Green (
#42b883) - Vue.js 專案 - Angular Red (
#dd0531) - Angular 專案 - Svelte Orange (
#ff3d00) - Svelte 專案 - Nuxt Green (
#00dc82) - Nuxt.js 專案 - Tailwind Cyan (
#06b6d4) - 使用 Tailwind CSS 的專案
後端技術
- Node Green (
#215732) - Node.js 後端專案 - Node.js Green (
#68a063) - Node.js 全端專案 - Deno Green (
#00a853) - Deno 專案 - Python Blue (
#3776ab) - Python 專案 - Go Cyan (
#00add8) - Go 專案 - Rust Orange (
#ce422b) - Rust 專案 - PHP Purple (
#777bb4) - PHP 專案 - Ruby Red (
#cc342d) - Ruby 專案 - Java Orange (
#007396) - Java 專案 - Kotlin Purple (
#7f52ff) - Kotlin 專案 - Elixir Purple (
#6f42be) - Elixir 專案 - Scala Red (
#dc322f) - Scala 專案 - C# Purple (
#239120) - C# 專案 - C++ Blue (
#00599c) - C++ 專案
框架與工具
- Django Green (
#092e20) - Django 專案 - Laravel Red (
#ff2d20) - Laravel 專案 - NestJS Red (
#ea2845) - NestJS 專案 - Spring Green (
#6db33f) - Spring Framework 專案 - Fastify Blue (
#000000) - Fastify 專案
JavaScript 生態系
- JavaScript Yellow (
#f9e64f) - 純 JavaScript 專案 - TypeScript Blue (
#3178c6) - TypeScript 專案 - Babel Yellow (
#f9dc3e) - Babel 設定專案 - Webpack Blue (
#8dd6f9) - Webpack 相關專案 - ESLint Purple (
#4b32c3) - ESLint 設定專案
資料庫與基礎設施
- MongoDB Green (
#13aa52) - MongoDB 專案 - PostgreSQL Blue (
#336791) - PostgreSQL 專案 - Redis Red (
#dc382d) - Redis 快取專案 - Docker Blue (
#2496ed) - Docker 容器化專案 - Kubernetes Blue (
#326ce5) - K8s 部署專案 - Firebase Orange (
#ffa400) - Firebase 專案 - GraphQL Pink (
#e10098) - GraphQL API 專案
其他科技品牌
- GitHub Green (
#08872b) - GitHub 相關專案或 Actions - npm Red (
#cb3837) - npm 套件開發 - Yarn Blue (
#2c8ebb) - 使用 Yarn 的專案 - AMD Red (
#ed1c24) - AMD 相關專案 - Intel Blue (
#0071c5) - Intel 相關專案 - Nvidia Green (
#76b900) - GPU 運算或機器學習專案 - Electron Blue (
#47848f) - Electron 桌面應用程式
特殊用途
- Jest Red (
#c21325) - 測試專案 - Bootstrap Purple (
#7952b3) - Bootstrap 前端專案 - Mandalorian Blue (
#1857a4) - 星際大戰粉絲的選擇 😄 - Something Different (
#832561) - 當你想要與眾不同的時候
如何使用這些配色
1. 安裝 Peacock
在 VSCode 擴充套件市場搜尋 “Peacock” 並安裝，或直接使用指令：
code --install-extension johnpapa.vscode-peacock2. 設定收藏配色
將以下完整配色清單加入你的 VSCode 設定檔（settings.json）：
{
"peacock.favoriteColors": [
{"name":"Airbnb Pink","value":"#ff385c"},
{"name":"Amazon Orange","value":"#ff9900"},
{"name":"AMD Red","value":"#ed1c24"},
{"name":"Angular Red","value":"#dd0531"},
{"name":"Apple Gray","value":"#555555"},
{"name":"AWS Orange","value":"#ff9900"},
{"name":"Azure Blue","value":"#007fff"},
{"name":"Babel Yellow","value":"#f9dc3e"},
{"name":"Bootstrap Purple","value":"#7952b3"},
{"name":"C++ Blue","value":"#00599c"},
{"name":"C# Purple","value":"#239120"},
{"name":"Clojure Green","value":"#5881d8"},
{"name":"Deno Green","value":"#00a853"},
{"name":"Django Green","value":"#092e20"},
{"name":"Docker Blue","value":"#2496ed"},
{"name":"Electron Blue","value":"#47848f"},
{"name":"Elixir Purple","value":"#6f42be"},
{"name":"ESLint Purple","value":"#4b32c3"},
{"name":"Facebook Blue","value":"#1877f2"},
{"name":"Fastify Blue","value":"#000000"},
{"name":"Firebase Orange","value":"#ffa400"},
{"name":"GitHub Green","value":"#08872b"},
{"name":"Go Cyan","value":"#00add8"},
{"name":"Google Blue","value":"#4285f4"},
{"name":"GraphQL Pink","value":"#e10098"},
{"name":"Haskell Purple","value":"#5e5086"},
{"name":"Instagram Pink","value":"#e4405f"},
{"name":"Intel Blue","value":"#0071c5"},
{"name":"Java Orange","value":"#007396"},
{"name":"JavaScript Yellow","value":"#f9e64f"},
{"name":"Jest Red","value":"#c21325"},
{"name":"Kotlin Purple","value":"#7f52ff"},
{"name":"Kubernetes Blue","value":"#326ce5"},
{"name":"Laravel Red","value":"#ff2d20"},
{"name":"LinkedIn Blue","value":"#0a66c2"},
{"name":"Lua Blue","value":"#000080"},
{"name":"Mandalorian Blue","value":"#1857a4"},
{"name":"MATLAB Orange","value":"#0071c5"},
{"name":"Meta Blue","value":"#1877f2"},
{"name":"Microsoft Blue","value":"#0078d4"},
{"name":"MongoDB Green","value":"#13aa52"},
{"name":"NestJS Red","value":"#ea2845"},
{"name":"Netflix Red","value":"#e50914"},
{"name":"Node Green","value":"#215732"},
{"name":"Node.js Green","value":"#68a063"},
{"name":"npm Red","value":"#cb3837"},
{"name":"Nuxt Green","value":"#00dc82"},
{"name":"Nvidia Green","value":"#76b900"},
{"name":"Perl Blue","value":"#0073a1"},
{"name":"PHP Purple","value":"#777bb4"},
{"name":"PostgreSQL Blue","value":"#336791"},
{"name":"Python Blue","value":"#3776ab"},
{"name":"R Blue","value":"#276dc3"},
{"name":"React Blue","value":"#61dafb"},
{"name":"Redis Red","value":"#dc382d"},
{"name":"Ruby Red","value":"#cc342d"},
{"name":"Rust Orange","value":"#ce422b"},
{"name":"Scala Red","value":"#dc322f"},
{"name":"Slack Purple","value":"#e01e5a"},
{"name":"Something Different","value":"#832561"},
{"name":"Spotify Green","value":"#1db954"},
{"name":"Spring Green","value":"#6db33f"},
{"name":"Svelte Orange","value":"#ff3d00"},
{"name":"Swift Orange","value":"#fa7343"},
{"name":"Tailwind Cyan","value":"#06b6d4"},
{"name":"Tesla Red","value":"#e82127"},
{"name":"Twitter Blue","value":"#1da1f2"},
{"name":"TypeScript Blue","value":"#3178c6"},
{"name":"Uber Black","value":"#000000"},
{"name":"Vue Green","value":"#42b883"},
{"name":"Webpack Blue","value":"#8dd6f9"},
{"name":"WhatsApp Green","value":"#25d366"},
{"name":"Yarn Blue","value":"#2c8ebb"}
]
}這份清單包含了 74 種配色，涵蓋主流的程式語言、框架、工具和科技品牌。你可以直接複製整段 JSON 貼到你的設定檔中。
3. 使用配色
開啟專案後，按下 Ctrl+Shift+P（Mac: Cmd+Shift+P）開啟指令面板，輸入 “Peacock”，你會看到以下選項：
- Peacock: Change to a Favorite Color - 從收藏清單選擇顏色
- Peacock: Enter a Color - 輸入自訂顏色
- Peacock: Surprise Me with a Random Color - 隨機選擇顏色
- Peacock: Reset Colors - 重設為預設顏色
結語
Peacock 是一個看似簡單，但能大幅提升開發效率的工具。透過視覺化的顏色標記，我再也不會在錯誤的專案視窗中執行不對的指令，也能更快速地在多個專案間切換。
相關連結