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 very 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.
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 us 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:
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"
}
}
}
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 very 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 very 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.