Custom VSCode’s top bar color
Why not color up your dev tools? So VSCode became a default much-loved text editor for swarms of web devs due to various reasons, the main being it’s just cool to use.
Let’s see how we can customize the color of the top bar. You may ask why we need? Well, one use case is to visually separate various open projects. Or to separate backend from frontend of one project open in two VSCode windows. You pick.
First, make sure that your Title Bar Style is set to custom. Hit cmd + , to go to User Settings and search for title. Scroll down and find Window: Title Bar Style:
Once the above is done, make sure you have .vscode folder in the root of your project and place the following settings.json file in it:
Feel free to tweak color’s HEX values to your liking. Enjoy!
