A Visual Studio Code extension that subtly changes the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.
- Open Extensions sidebar panel in Visual Studio Code.
View → Extensions - Search for
Peacock - Click Install
- Click Reload, if required
Commands can be found in the command palette. Look for commands beginning with Peacock:
- Change the color of Affected Elements (see
peacock.affect*in the Settings section) to- user defined color
- a random color
- Select a user-defined color from your Favorite Colors
- Save a user-defined color with the Save Favorite Color
- Adjust the coloring of affected elements by making them slightly darker or lighter to provide a subtle visual contrast between them
- Saves colors to your workspace in the
.vscode/settings.jsonfile
| Property | Description |
|---|---|
| peacock.affectActivityBar | Specifies whether Peacock should affect the activity bar |
| peacock.affectStatusBar | Specifies whether Peacock should affect the status bar |
| peacock.affectTitleBar | Specifies whether Peacock should affect the title bar (see title bar coloring) |
| peacock.elementAdjustments | fine tune coloring of affected elements |
| peacock.favoriteColors | array of objects for color names and hex values |
| peacock.keepForegroundColor | Specifies whether Peacock should change affect colors |
| peacock.surpriseMeOnStartup | Specifies whether Peacock apply a random color on startup |
| peacock.darkForeground | override for the dark foreground |
| peacock.lightForeground | override for the light foreground |
After setting 1 or more colors (hex or named) in the user setting for peacock.favoriteColors, you can select Peacock: Change to a Favorite Color and you will be prompted with the list from peacock.favoriteColors from user settings.
Gatsby Purple -> #123456
Auth0 Orange -> #eb5424
Azure Blue -> #007fff
Favorite colors require a user-defined name (name) and a value ( value ), as shown in the example below.
"peacock.favoriteColors": [
{ "name": "Gatsby Purple", "value": "#639" },
{ "name": "Auth0 Orange", "value": "#eb5424" },
{ "name": "Azure Blue", "value": "#007fff" }
]You can find brand color hex codes from https://brandcolors.net
When opening the Favorites command in the command palette, Peacock now previews (applies) the color as you cycle through them. If you cancel (press ESC), your colors revert to what you had prior to trying the Favorites command
When you apply a color you enjoy, you can go to the workspace settings.json and copy the color's hex code, then create your own favorite color in your user settings.json. This involves a few manual steps and arguably is not obvious at first.
The Peacock: Save Current Color as Favorite Color feature allows you to save the currently set color as a favorite color, and prompts you to name it.
You can tell peacock which parts of VS Code will be affected by when you select a color. You can do this by checking the appropriate setting that applies to the elements you want to be colored. The choices are:
You can fine tune the coloring of affected elements by making them slightly darker or lighter to provide a subtle visual contrast between them. Options for adjusting elements are:
"darken": reduces the value of the selected color to make it slightly darker"lighten": increases the value of the selected color to make it slightly lighter"none": no adjustment will be made to the selected color
An example of using this might be to make the Activity Bar slightly lighter than the Status Bar and Title Bar to better visually distinguish it as present in several popular themes. This can be achieved with the setting in the example below.
"peacock.affectActivityBar": true,
"peacock.affectStatusBar": true,
"peacock.affectTitleBar": true,
"peacock.elementAdjustments": {
"activityBar": "lighten"
}This results in the Activity Bar being slightly lighter than the Status Bar and Title Bar (see below).
Recommended to remain false (the default value).
When set to true Peacock will not colorize the foreground of any of the affected elements and will only alter the background. Some users may desire this if their theme's foreground is their preference over Peacock. In this case, when set to true, the foreground will not be affected.
Recommended to remain false (the default value).
When set to true Peacock will automatically apply a random color when opening a workspace that does not define color customizations. This can be useful if you frequently open many instances of VS Code and you are interested in quickly and easily telling them apart, but are not overly committed to the specific color applied.
| Command | Description |
|---|---|
| Peacock: Reset Colors | Removes any of the color settings from the .vscode/setttings.json file |
| Peacock: Enter a Color | Prompts you to enter a color (see input formats) |
| Peacock: Color to Peacock Green | Sets the color to Peacock main color, #42b883 |
| Peacock: Surprise me with a Random Color | Sets the color to a random color |
| Peacock: Change to a Favorite Color | Prompts user to select from their Favorites |
| Peacock: Save Current Color to Favorites | Save Current Color to their Favorites |
| Peacock: Add Recommended Favorites | Add the recommended favorites to user settings (override same names) |
When entering a color in Peacock several formats are acceptable. These include
| Format | Examples |
|---|---|
| Named HTML colors | purple, blanchedalmond |
| Short Hex | #8b2, f00 |
| Short Hex8 (RGBA) | #8b2c, f00c |
| Hex | #88bb22, ff0000 |
| Hex8 (RGBA) | #88bb22cc, ff0000cc |
| RGB | rgb (136, 187, 34), rgb 255 0 0 |
| RGBA | rgba (136, 187, 34, .8), rgba 255 0 0 .8 |
| HSL | hsl (80, 69%, 43%), hsl (0 1 .5) |
| HSLA | hsla (80, 69%, 43%, 0.8), hsla (0 1 .5 .8) |
| HSV | hsv (80, 82%, 73%), hsv (0 1 1) |
| HSVA | hsva (80, 82%, 73%, 0.8), hsva (0,100%,100%,0.8) |
All formats offer flexible data validation:
- For named HTML colors, case is insensitive
- For any hex value, the
#is optional. - For any color formula value all parentheses and commas are optional and any number can be a decimal or percentage (with the exception of the alpha channel in rgba(), hsla(), and hsva() which must be a decimal between 0 and 1).
There are many features in the roadmap. Please refer to the issues list and feel free to grab one and contribute!
See the CHANGELOG for the latest changes.
Peacock affects:
- the titlebar, activitybar, and statusbar elements
- anything regarding the readability of these elements
- background and foreground colors
- any elements that are displayed within these peacock elements (e.g. badges, hover)
When any Peacock setting is changed, Peacock should update the colors appropriately based on the most recently used color during the active VS Code instance's session.
User selects a color, then later changes which elements are affected.
- User chooses "surprise me" and sets the color to #ff0000
- Peacock saves #ff0000 in memory as the most recently used color
- User goes to settings and unchecks the "Peacock: Affect StatusBar"
- Peacock listens to this change, clears all colors and reapplies the #ff0000
User opens VS Code, already has colors in their workspace, and immediately changes which elements are affected.
- User opens VS Code
- Workspace colors are set to #369
- User goes to settings and unchecks the "Peacock: Affect StatusBar"
- Peacock listens to this change, clears all colors and reapplies the #369
User opens VS Code, has no colors in workspace, and immediately changes which elements are affected.
- User opens VS Code
- No workspace colors are set
- Peacock's most recently used color is not set
- User goes to settings and unchecks the "Peacock: Affect StatusBar"
- Peacock listens to this change, however no colors are applied
The VS Code Title Bar style can be configured to be custom or native with the window.titleBarStyle setting. When operating in native mode, Peacock is unable to colorize the Title Bar because VS Code defers Title Bar management to the OS. In order to leverage the Affect Title Bar setting to colorize the Title Bar, the window.titleBarStyle must be set to custom.
On macOS there are additional settings that can impact the Title Bar style and force it into native mode regardless of the window.titleBarStyle setting. These include:
window.nativeTabsshould be set to false. If using native tabs, the rendering of the title bar is deferred to the OS and native mode is forced.window.nativeFullScreenshould be set to true. If not using native full screen mode, the custom title bar rendering presents issues in the OS and native mode is forced.
A successful and recommended settings configuration to colorize the Title Bar is:
Peacock is using tinycolor which provides some basic color theory mechanisms to determine whether or not to show a light or dark foreground color based on the perceived brightness of the background. More or less, if it thinks the background is darker than 50% then Peacock uses the light foreground. If it thinks the background is greater than 50% then Peacock uses the dark foreground.
Brightness is measured on a scale of 0-255 where a value of 127.5 is perfectly 50%.
Example:
const lightForeground = '#e7e7e7';
const darkForegound = '#15202b';
const background = '#498aff';
const perceivedBrightness = tinycolor(background).getBrightness(); // 131.903, so 51.7%
const isDark = tinycolor(background).isDark(); // false, since brightness is above 50%
const textColor = isDark ? lightForeground : darkForeground; // We end up using dark textThis particular color (#498aff) is very near 50% on the perceived brightness, but the determination is binary so the color is either light or dark based on which side of 50% it is (exactly 50% is considered as light by the library). For the particular color #498aff, all of the theory aspects that tinycolor provides show that using the dark foreground is the right approach.
const readability = tinycolor.readability(darkForeground, background); // 4.996713
const isReadable = tinycolor.isReadable(darkForeground, background); // trueThe readability calculations and metrics are based on Web Content Accessibility Guidelines (Version 2.0) and, in general, a ratio close to 5 is considered good based on that information. If we run the lightForeground through the same algorithm you can see that readability actually suffers with a reduced contrast ratio:
const readability = tinycolor.readability(lightForeground, background); // 2.669008
const isReadable = tinycolor.isReadable(lightForeground, background); // falseRecommended favorites are a list of constants found in favorites.ts. These are alphabetized.
Recommended favorites are a starting point for favorites. They will be installed whenever a new version is installed. They will extend your existing favorites, so feel free to continue to add to your local favorites! However be careful not to change the color of the recommended favorites as they will be overridden when a new version is installed.
This list may change from version to version depending on the Peacock authoring team.
Inspiration comes in many forms. These folks and teams have contributed either through ideas, issues, pull requests, or guidance. Thank you!
-
The VS Code team and their incredibly helpful guide for creating extensions
-
Here are some great examples for extensions from the VS Code team
Key Contributors of PRs:
- @josephrexme for the name
- @musicfuel for the icon
- Implemented reset for each settings that isn't selected (by https://github.com/souzara)
Key Contributors of issues, reviews, and/or ideas:
If you want to try the extension out start by cloning this repo, cd into the folder, and then run npm install.
Then you can run the debugger for the launch configuration Run Extension. Set breakpoints, step through the code, and enjoy!