Development | 1 Min Read

Changing the colour of VSCode's menu bar

VSCode is already one of the most customisable code editors out there but did you know you can change the menu bar colour per project?

To change the menu bar colour of your VSCode instance per project you just need to add the following folders and files to your project and no matter who picks it up your colours will be there for all to see.

Start by creating a '.vscode' folder in the root of your project and inside this folder add a 'settings.json' file, so your structure will be like:

1/
2 .vscode
3 settings.json
4 ...Other folders in your project root

With your folder and file structure set-up, open your settings.json file and drop the following code into it:

1{
2 "workbench.colorCustomizations": {
3 "titleBar.activeBackground": "",
4 "titleBar.inactiveBackground": ""
5 }
6}

Now, all you need to do is change the two empty strings to be two hex values of your choosing.

And, there you go your VSCode menu bar now changes colour per project and if you're active or not on that window.



Content

Latest Blog Posts

Below is my latest blog post and a link to all of my posts.

View All Posts

Content

Latest Video

Here is my YouTube Channel and latest video for your enjoyment.

View All Videos
Set Up Next.js (App Router) Authentication in Minutes with Clerk!

Set Up Next.js (App Router) Authentication in Minutes with Clerk!

Contact

Join My Newsletter

Subscribe to my weekly newsletter by filling in the form.

Get my latest content every week and 0 spam!