Colorloco — Per-Project Window Colors
Give every project its own window color, automatically. Colorloco tints the
whole window — title bar, activity bar, side bar, editor, and status bar — so you
always know which window is which, and the same project always gets the same
color, across restarts, fresh clones, and machines.
Why you'll like it
- Zero effort. Pick a style once. Every project gets a distinct color on its own.
- Always consistent. Colors are derived deterministically from the project's
name (or Git repo), so the same project is always the same color — even on a
brand-new clone with no saved settings.
- Yours to override. Pick a specific color, lock it, reshuffle it, or turn it
off per project. Manual choices roam across machines via Settings Sync.
- Tasteful palettes. Eight curated palettes, from deep and muted to bold and
vibrant. Text stays readable: active labels are held to WCAG AA (4.5:1) and
dimmed/inactive labels never fall below AA-large (3:1).
Getting started
On first run, Colorloco shows a gentle prompt. Choose Pick a style to run the
3-step setup (palette → automatic/manual → name vs. repo), or Use defaults
to start instantly. You can re-run it anytime with Colorloco: Run Setup.
Title bar coloring requires VS Code's custom title bar. Colorloco will offer
to enable it. The activity bar and status bar are colored regardless.
How persistence works
Colorloco uses three cooperating layers so a project's color is rock-solid:
- Deterministic color — a stable hash of the project's identity selects a
color from your palette. This needs no stored state, so it reproduces the
exact same color on a fresh clone or a new machine.
- Saved overrides — manual picks, locks, and reshuffles are stored in VS
Code's synced global state (not in your repo), so your intent follows you.
- Workspace settings — the chosen colors are written to the workspace's
workbench.colorCustomizations, which VS Code paints before the extension
even loads. That means no color flash, and the color persists even if Colorloco
is disabled.
Colorloco only ever writes its own color keys and merges non-destructively, so your
existing workbench.colorCustomizations are preserved.
The color lives in .vscode/settings.json. If you'd rather not commit it, add
that file to your .gitignore.
Palettes
| Palette |
Vibe |
| Graphite |
Dark, muted, easy on the eyes |
| Tide (default) |
Cool blues and teals |
| Jewel |
Rich, deep jewel tones |
| Prism |
Bold and vibrant — every project pops |
| Macaron |
Soft pastels |
| Synthwave |
Electric neon on dark |
| Terra |
Warm terracotta, olive, sand |
| Monochrome |
Subtle grayscale tints |
Commands
All commands are under the Colorloco category, and reachable from the status bar
dot:
- Run Setup — re-run the onboarding wizard.
- Change Color Style (Palette) — switch palettes (with live preview).
- Give This Project a New Color — reshuffle to a different color, deterministically.
- Pick a Specific Color for This Project — choose a swatch or a custom hex.
- Lock / Unlock This Project's Color — freeze it against palette changes.
- Reset This Project's Color — back to the automatic color.
- Toggle Automatic Coloring — switch between auto and manual modes.
- Set Project Identity (Name or Repo) — choose what colors are keyed on.
- Turn Off Colors for This Project — per-project opt-out (toggle).
- Copy This Project's Color (hex), Enable Custom Title Bar,
Export / Import Color Assignments.
Settings
See Settings → Extensions → Colorloco. Highlights: colorloco.palette,
colorloco.mode, colorloco.identityStrategy, colorloco.targets, colorloco.intensity,
colorloco.foregroundContrast, colorloco.highContrastSafeMode, colorloco.hashSeed.
Development
npm install
npm run build # bundle with esbuild -> dist/extension.js
npm run watch # rebuild on change
npm run check-types # tsc --noEmit
npm run lint # eslint
npm run test:unit # pure-logic unit tests (node --test via tsx)
npm test # types + lint + unit tests
Press F5 in VS Code to launch an Extension Development Host.
License
MIT
