什麼是 Peacock？
Peacock 是 John Papa 寫的一個 VSCode 擴充套件，實在是頗實用。它做的事情很單純：讓你為不同的工作區套上不同的顏色，把狀態列、標題列、活動列這些 UI 都染色。這樣同時開一堆專案的時候，你瞄一眼就知道現在身在哪個視窗了。
為什麼需要 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 看起來只是個塗塗顏色的小玩意，不過它對開發效率的幫助實在是出乎意料地大。自從用了它，我再也沒有在錯的視窗裡跑錯指令過，在一堆專案間切換也順手很多。一個這麼小的工具能解決這麼煩人的問題，真的頗值得裝。當然啦，配色這種東西很個人，我這套你不用照單全收，挑你看得順眼、記得住的就好 :-)
相關連結