VSCode Color Coded Title Bars


TAGS: vscode

If you have to switch between repositories multiple times a day, you might benefit from having your workspaces color coded. Blue for me is the UI, while our services code is orange, etc.

In the root of your project make a folder named .vscode. Inside create a settings.json file. Paste the following:

  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#34ace0",
    "titleBar.activeForeground": "#ffffff",
    "titleBar.inactiveBackground": "#368fb5",
    "titleBar.inactiveForeground": "#d7d7d7"

This will give you a nice skyblue titlebar. Change the colors and repeat the process in any repo you work in to give you a nice visual cue.

Picked this one up from Wes Bos's Advanced React course a while back. Still appreciate the visual cue every day.