One of the thing that I really like to do in VSCode is to assign a per project settings.json to allow me to change the title bar color of VSCode.

Why?

I’m sure this has happened to any of us. We working on two projects simultaneously with similar file and folder structure. We update one project, save, refresh or attempt to deploy and none of our changes are present… we then spend the next 20 mins trying to figure what has gone wrong only to realize that we changed the files in the wrong project. A solution to this is to have differing title bar colors for each project. That way you have a bit of a visual queue that you are indeed not in the correct project! I know it sounds stupid, but it works and here is how to do it in VSCode.

This tip originally came from Wes Bos’s Fullstack Advanced React and GraphQL course and I’ve been using it ever since finding it there.

Setup

Make sure the you create a folder called .vscode in the root of your project (depending on what you have configured this may already be preset). Next, create settings.json if it does not already exist. Add the following code into settings.json:

1
2
3
4
5
6
7
8

{
  "workbench.colorCustomizations": {
    "titleBar.activeForeground": "#000000",
    "titleBar.inactiveForeground": "#000000",
    "titleBar.inactiveBackground": "#FFC600",
    "titleBar.activeBackground": "#00ff6acc"
  }
}

Repeat the above process for the backend portion of your site; however, be sure to modify titleBar.inactiveBackground and titleBar.activeBackground to unique colors not used on your frontend.

Now when you have both editors open the title bar color should indicate whether your editing in the frontend or backend.