Simon Blackbourn

Setting the title bar colour in VS Code

Workspaces are an incredibly useful feature of VS Code, especially if you are working on multiple projects. A workspace can contain one or more root folders that contain your project's code; VS Code will remember the state of the workspace on startup, such as which files you had open, the position of the cursor, etc.; and you can enable and disable extensions on a per-workspace basis.

The problem

It can be difficult to tell at a quick glance which workspace you've currently got open. And if you have multiple windows open, each for a different workspace, it's hard to differentiate them.

In the screenshot below, the only thing that tells us which workspace we're in is the name appended to the filename in the title bar.

Screenshot of a VS Code workspace with the default uncoloured title bar

The solution

Note: Unfortunately this solution is currently only supported in VS Code for MacOS - sorry Windows and Linux users :(

VS Code has a couple of settings that allow you to specify the title bar background and foreground colours on a per-workspace basis, so that each workspace is visually distinct. By using a different colour for each of your workspaces, you can instantly see which one you're currently in.

Here's the same workspace as above, but with a coloured title bar:

Screenshot of a VS Code workspace with a bright red title bar

How-to

The title bar colours are defined in the workspace settings (which override your user settings). Open up the command palette and find Open Workspace Settings (or type ⌘, then click the Workspace Settings tab).

You can see your workspace folder path(s) in the folders option, then a settings option (which may or may not be empty). Within the settings section, add a workbench.colorCustomizations option with four sub-options like this:

{
    "folders": [
        {
            "path": "/path/to/my/workspace/folder"
        }
    ],
    "settings": {
        "workbench.colorCustomizations": {
            "titleBar.activeBackground": "#d12229",
            "titleBar.activeForeground": "#ffffff",
            "titleBar.inactiveBackground": "#811519",
            "titleBar.inactiveForeground": "#cccccc"
        }
    }
}

View on Gist

I tend to use a bold colour taken from the theme of the website I am working on for the active background, with either white or dark grey for the text colour, whichever is most readable. VS Code provides a handy colour picker when you click on a hex colour code, so adusting the colours is easy.

The inactive colours are used when the VS Code window is not currently focused. For these I darken both colours slightly, just enough to show it's unfocused but still recognisable as that workspace. If you are happy with the same colours for active and inactive, you can delete the two inactive options.