Working on multiple windows in VS Code? Simple trick to increase productivity!

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!

Comments

[Andrei Gatej]

There is also a great extension that could serve the same purpose!

[Gareth Bradley]

+1 for Peacock.

[Arkadiusz Chatys]

That looks great! Personally, I don't need an extension for this little trick, but it looks really good. Thanks for sharing Andrei!

[venoel]

Note that this color is currently only supported on macOS.

[Ericarthurc]

It works on Windows just fine; tested it today. Only issue I had say the settings.json file didn't populate any code. I just had to manually type it in and it works right away. Visual studio was created with electron, so I don't see why this wouldn't work on Windows.

[Arkadiusz Chatys]

Fair point. I had no chance to play with those settings on Windows. But thinking about how Windows's windows 😂 are built it might be impossible there. Thanks for that!

[Andreas Opferkuch]

There's also a nice extension that uses similar properties to change the colors >within< a workspace, depending on the directory you're in.
Very useful for monorepos (but it uses regex, so it's flexible):
marketplace.visualstudio.com/items...

[Fernando Belotto]

Arkadiusz you made my life soooo much easy with this tip! i usually work with multiples projects in multiples vscode instances. Thank you from an brazilian friend! :)