If you've ever struggled with working in multiple VS Code windows, there's a really neat solution that can help you distinguish, which window are you currently working on. You've might have seen this solution on some of Wes Bos tutorials (React+Node).

Let's say, you work on both React and Node repository at the same time, and you want to make it easier for your eyes to understand which window is currently active.

With a few lines of code, you can change the color of the Title Bar and attach this setting to the project. You can even push it to a repository, so other developers can use it too (you don't have to do it though).

Let's get to work!

Creating a file with settings

Manual

Create .vscode folder and settings.json file inside of the folder in your repository.

Automated

1) Open VS Code with the project that you want to style.
2) Click ⌘ + ⇧ + P, which opens commands list (ctrl+shift+p on Windows).

3) Search for Preferences: Open Workspace Settings. This will open a new Settings tab in your VS Code.

4) In the sidebar choose Workbench > Appearance.

5) Under Color Customizations click Edit in settings.json. This will create a new .vscode folder with settings.json file, inside of the repository.

Setting color of your window

Inside of your settings.json file, you have a few different options that you can set.

titleBar.activeBackground - color window Title Bar when the window is active.

titleBar.inactiveBackground - color window Title Bar when another window is active.

titleBar.activeForeground - color text of Title Bar.

Protip: set inactiveBackground to just slightly darker color from activeBackground to identify which window are you currently using.

There's a lot of different options that you can set to customize the whole window: https://code.visualstudio.com/api/references/theme-color

{

  // rest of your settings,

  "workbench.colorCustomizations": {

    "titleBar.activeBackground" : "#f2c216",

    "titleBar.inactiveBackground": "#ac8b12",

    "titleBar.activeForeground":"#000",

  }

} 

Result

Other VS Code Tips & Tricks

• Use snippets in VS Code, to boost your productivity and simplify your work!