Automatically assigns a unique, consistent color to your VS Code title bar based on your project folder name. Instantly distinguish between workspaces at a glance, with no configuration required.
How it works
- Reads your workspace folder name
- Generates a deterministic color from it (same folder = same color, always)
- Applies it to the title bar — active and inactive states
Colors are spread evenly around the hue circle so neighboring projects stay
easy to tell apart, and identity uses both the hue and one of three brightness
tiers. By default the bar is a soft pastel; see Settings to make it bolder.
Settings
| Setting |
Default |
Description |
headerHue.mode |
pale |
pale for a soft, light title bar; bright for a deep saturated bar with white text. |
headerHue.intensity |
50 |
How strong the color is within the chosen mode, from 0 (softest) to 100 (strongest). |
headerHue.orgColors |
{} |
Fixed status bar colors by organization folder name, e.g. { "acme": "#e30513" }, matched at any depth. |
headerHue.orgLevel |
0 |
Generated status bar color from a folder above the project: 1 is the parent folder, 2 its parent. 0 turns it off. |
Set them once in your user settings and they apply to every project. Changes
take effect immediately — no reload.
Org marker
When projects are grouped by organization, the status bar can show which one a
project belongs to, while the title bar keeps the project's own color. List
each organization folder with its color, such as a brand color:
"headerHue.orgColors": {
"acme": "#e30513",
"globex": "#11351c"
}
Every project inside a listed folder takes its color, at any depth:
~/Documents/acme/api and ~/Documents/acme/Projects/website both get
#e30513. When folders are nested, the nearest listed one wins. The color is
used exactly as given, whatever the mode and intensity, with black or white
text, whichever contrasts more.
For organizations you haven't listed, headerHue.orgLevel generates a color
from the folder that many levels above the project: 2 for
~/Documents/acme/Projects/website. Generated colors can land close together
when you have several organizations, so prefer listing them.
Title bar text always meets WCAG AA contrast. In pale mode the text is a deep
tint of the bar's own hue; in bright mode it is white, and backgrounds are
pinned to a constant perceived brightness so white stays readable on every hue.
Note that very low intensity in pale mode makes projects harder to tell apart,
since near-white tints leave little room for colors to differ.
Installation
Search for HeaderHue in the VS Code Extensions panel, or install from the Marketplace.
License
MIT
