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
inactiveBackgroundto just slightly darker color fromactiveBackgroundto 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
Top comments (8)
There is also a great extension that could serve the same purpose!
+1 for Peacock.
That looks great! Personally, I don't need an extension for this little trick, but it looks really good. Thanks for sharing Andrei!
Note that this color is currently only supported on macOS.
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.
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!
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...
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! :)