القائمة
Project color theming for VS Code and iTerm2. Use when the user asks to set, change, darken, lighten, or reset project colors, save favorite colors, or mentions Peacock color theming.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | peacock-colors |
| version | 1.0.0 |
| description | Project color theming for VS Code and iTerm2. Use when the user asks to set, change, darken, lighten, or reset project colors, save favorite colors, or mentions Peacock color theming. |
Manage VS Code project colors with Peacock-style theming. This skill provides comprehensive color management for VS Code workspaces, similar to the popular Peacock extension.
With hex code:
Set my project color to #FF5733
With natural language:
Set my project color to dark forest green
Set my project color to vibrant ocean blue
Set my project color to deep magenta
Random vibrant color:
Set a random project color
Darken my project color by 10%
Lighten my project color by 20%
Save this as my favorite "production" color
Save current color to favorites
Apply my favorite color
Set project color from favorites
Show my project color
What color is this project?
Reset my project colors
Remove all color settings
.vscode/settings.json under peacock.color and workbench.colorCustomizations~/.claude/.peacock-favorites.json#RRGGBB format (e.g., #8d0756)Adjustments use RGB color space:
Darken by 10%:
new_r = current_r * 0.9
new_g = current_g * 0.9
new_b = current_b * 0.9
Lighten by 10%:
new_r = current_r + (255 - current_r) * 0.1
new_g = current_g + (255 - current_g) * 0.1
new_b = current_b + (255 - current_b) * 0.1
When setting a project color, these VS Code settings are configured:
{
"peacock.color": "<base_color>",
"workbench.colorCustomizations": {
"activityBar.activeBorder": "<complementary_color>",
"activityBar.background": "<lighter_variant>",
"activityBar.foreground": "<text_color>",
"activityBar.inactiveForeground": "<text_color_50%_opacity>",
"activityBarBadge.background": "<complementary_color>",
"activityBarBadge.foreground": "#e7e7e7",
"editorGroup.border": "<base_color>",
"panel.border": "<base_color>",
"sash.hoverBorder": "<base_color>",
"sideBar.border": "<base_color>",
"statusBar.background": "<base_color>",
"statusBar.foreground": "<text_color>",
"statusBarItem.hoverBackground": "<lighter_variant>",
"statusBarItem.remoteBackground": "<base_color>",
"statusBarItem.remoteForeground": "<text_color>",
"tab.activeBorder": "<complementary_color>",
"titleBar.activeBackground": "<base_color>",
"titleBar.activeForeground": "<text_color>",
"titleBar.inactiveBackground": "<base_color_90%_opacity>",
"titleBar.inactiveForeground": "<text_color_60%_opacity>"
}
}
Lighter Variant (for activity bar): Add approximately 30% brightness to RGB values, cap at 255:
lighter_r = min(base_r + 77, 255)
lighter_g = min(base_g + 77, 255)
lighter_b = min(base_b + 77, 255)
Complementary Color (for badges): Rotate hue by 180 degrees:
Text Contrast Color:
Calculate relative luminance: L = 0.2126*R + 0.7152*G + 0.0722*B
#e7e7e7 (light text) if L < 0.5#15202b (dark text) if L >= 0.5| Hue | Keywords | Dark | Vibrant | Light |
|---|---|---|---|---|
| Red | red, crimson, ruby, cherry, rose | #8B0000 | #FF6B6B | #FFB6C1 |
| Orange | orange, rust, amber, tangerine, coral | #CC5500 | #FF8C42 | #FFCC99 |
| Yellow | yellow, gold, lemon, mustard | #B8860B | #FFD700 | #FFEB99 |
| Green | green, forest, emerald, lime, olive | #2D5016 | #4CAF50 | #90EE90 |
| Teal | teal, turquoise, aquamarine | #123323 | #20B2AA | #AFEEEE |
| Cyan | cyan, sky, aqua | #006B7D | #00CED1 | #E0FFFF |
| Blue | blue, navy, ocean, azure, sapphire | #003E80 | #4A90E2 | #ADD8E6 |
| Purple | purple, violet, lavender, plum | #4B0082 | #9370DB | #DDA0DD |
| Magenta | magenta, fuchsia, hot pink | #8D0756 | #FF1493 | #FFB6E5 |
| Brown | brown, chocolate, coffee, tan, beige | #654321 | #A0522D | #D2B48C |
| Gray | gray, grey, silver, slate, charcoal | #2C2C2C | #808080 | #D3D3D3 |
When generating random colors, select from:
brew install jqapt install jq.vscode/settings.json in the project directory.vscode directory exists.vscode/settings.json (or treat as empty {}).vscode/settings.json.vscode/settings.json (peacock.color)Saving:
~/.claude/.peacock-favorites.jsonApplying:
Reset (project only):
peacock.color propertyworkbench.colorCustomizations.vscode/settings.json if now emptyRemove All (complete cleanup):
.vscode/settings.json~/.claude/.peacock-favorites.json✅ Project color set to #8d0756 (dark magenta)
Interpreted: "dark magenta" → #8d0756
Color applied to:
- Activity Bar: #A87BAB (lighter variant)
- Status Bar: #8d0756 (base color)
- Title Bar: #8d0756 (base color)
- Badges: #07568D (complementary - blue)
Reload VSCode window to see changes:
Cmd+Shift+P → "Developer: Reload Window"
Color darkened by 10%
Before: #8d0756
After: #7f064d
Applied to:
Title Bar: #7f064d
Status Bar: #7f064d
Activity Bar: #976b99
Reload VSCode window:
Cmd+Shift+P → "Developer: Reload Window"
Too dark? Lighten the color
Current Project Color
Base Color: #8d0756
RGB: (141, 7, 86)
Applied to:
Title Bar: #8d0756
Status Bar: #8d0756
Activity Bar: #A87BAB
Color copied to clipboard!
Modify:
Darken color - Make darker
Lighten color - Make lighter
Save to favorites - Save for later
Reset:
Reset colors
.vscode/settings.json (typically committed to git)~/.claude/.peacock-favorites.json