Favorite Colors

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.

Preview Your Favorite

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

Save Favorite Color

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.

Affected Elements

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:

Element Adjustments

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.

When using peacock with the Angular Red color, this results in the Activity Bar being slightly lighter than the Status Bar and Title Bar (see below).

Keep Foreground Color

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.

Surprise Me On Startup

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.

Commands

Command

Description

Peacock: Reset Colors

Removes any of the color settings from the .vscode/setttings.json file

Input Formats

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).

FAQ

Peacock Behavior

any elements that are displayed within these peacock elements (e.g. badges, hover)

Changing User Settings

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.

Example 1

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

Example 2

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

Example 3

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

Title Bar Coloring

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.nativeTabs should 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.nativeFullScreen should 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:

Credits

Inspiration comes in many forms. These folks and teams have contributed either through ideas, issues, pull requests, or guidance. Thank you!