VS Code Kingfisher

Colour your VS Code title bar per workspace — without touching .vscode/settings.json.

Install from VS Code Marketplace  |  View on GitHub

VS Code Kingfisher icon

If you work across multiple projects simultaneously, you'll know the friction: three VS Code windows open, all wearing the same dark theme, and you spend five seconds squinting at the title bar to figure out which one is your API project and which one is the frontend. It adds up.

The obvious fix is to colour the title bar — assign each workspace its own colour so you can identify it at a glance. There's even a popular extension that does exactly this: Peacock. So why build another one?

The Problem with the Existing Approach

Peacock works by writing your chosen colour into .vscode/settings.json — the workspace settings file that lives alongside your code. Teams share that file. It often gets committed to version control. The moment you add your personal hot-pink title bar colour to it, you're either pushing that preference to your colleagues or you're constantly fighting with .gitignore to keep it out.

This is a known and long-standing issue with Peacock, and it has no clean solution within Peacock's current design.

The Kingfisher Approach

Instead of touching .vscode/settings.json, Kingfisher stores your colour choice in VS Code's internal extension storage — globalState, a key-value store that lives outside your project entirely and is never version-controlled. Your colour preference is yours alone. Your team never sees it.

VS Code Kingfisher - multiple coloured windows

How It Works

To display the colour, Kingfisher writes to workbench.colorCustomizations in your personal user settings — not the workspace file. Clean separation.

Because workbench.colorCustomizations is a global user setting, each window applies its colour when it gains focus and clears it when focus moves away:

Window gains focus  →  apply this workspace's colour to user settings
Window loses focus  →  clear colour from user settings

You always see the correct colour for whichever window you're actively working in.

The Alt+Tab Solution

There's a secondary challenge: if the colour is cleared when a window loses focus, the Alt+Tab thumbnails all look identical again. Kingfisher's solution is a small but effective workaround — when a window loses focus, a sidebar panel opens automatically, filling the full height of the window with the workspace colour.

Window loses focus  →  clear title bar colour  +  open coloured sidebar panel
Window gains focus  →  restore title bar colour  +  close sidebar, restore Explorer

Each window maintains its own colour in the sidebar independently, so in Alt+Tab every window is visually distinct even when the title bar has reverted to the theme default.

Using It

Open the command palette (Ctrl+Shift+P / Cmd+Shift+P) and run Kingfisher: Set Title Bar Colour. You'll get:

  • A set of hand-picked pastel presets (Rose, Mint, Sky, Periwinkle, and more)
  • A native colour picker for precise control
  • A custom hex entry field

You can also click the Kingfisher indicator in the status bar to open the same menu. Your chosen colour is saved per-workspace, so each project remembers its own setting.

To remove a colour, run Kingfisher: Clear Title Bar Colour.

What Kingfisher Modifies

Kingfisher only touches four workbench.colorCustomizations keys in your personal user settings:

  • titleBar.activeBackground
  • titleBar.activeForeground
  • titleBar.inactiveBackground
  • titleBar.inactiveForeground

Foreground colours are calculated automatically using the WCAG 2.x relative luminance formula to ensure readable contrast. The inactive state uses a slightly dimmed version of your chosen colour. Any other customisations you have in place are left completely untouched.

Limitations

  • Because the title bar colour is applied globally at the moment of focus, you can't have two windows showing different title bar colours simultaneously. The sidebar panel is the mitigation for this.
  • On refocus, Kingfisher always restores the Explorer sidebar — VS Code's API doesn't expose which sidebar view was previously open.
  • If you need true simultaneous per-window title bar colouring and your team is happy to commit workspace settings, Peacock remains a valid alternative.

Get Started

  1. Install Kingfisher from the VS Code Marketplace
  2. Open a workspace in VS Code
  3. Run Kingfisher: Set Title Bar Colour from the command palette, or click the status bar indicator
  4. Pick a colour — Kingfisher does the rest

Kingfisher requires VS Code 1.85.0 or later.