Colorful VSCode titlebars for better productivity 💅

Many of the projects I work on at my job require cross-repository changes. As a result, I find myself flipping between VSCode windows.

The problem: each time I Cmd+` into a new window, there’s a split-second delay where I look for the tiny repo name among all the other visual noise.

Spot the difference?

The solution: A different title bar color for each repo, using VSCode theme customization and workspace settings!

Open the workspace settings in each repo and add the following setting:

"workbench.colorCustomizations": {
  "titleBar.activeBackground": "#553955" // change this color!
}

I recommend picking a color that works on white text (if you’re using a dark theme) and won’t be distracting — i.e. nothing too bright. Here are a few colors to get you started.

Et voilà! Pretty soon, you’ll subconsciously associate each repo with a different color. Much easier to find the window you’re looking for!

Beautiful! 🌈

Of course, the customization doesn’t have to end there. Maybe you also want to change the title bar border color, the status bar color, or the tab colors? I’d love to see how you’re customizing your workspaces, so drop a comment below if you’d like to share!

One nit: you’ll have to add .vscode to your .gitignore if you don’t want your workspace settings committed in git.