DEV Community

loading...
Cover image for Changing the colour of VSCode's menu bar

Changing the colour of VSCode's menu bar

conermurphy profile image Coner Murphy Originally published at conermurphy.com on ・1 min read

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:

/
  .vscode
      settings.json
  ...Other folders in your project root
Enter fullscreen mode Exit fullscreen mode

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

{
    "workbench.colorCustomizations": {
        "titleBar.activeBackground": "",
        "titleBar.inactiveBackground": ""
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

If you have any questions or just want to chat you can find me on Twitter @MrConerMurphy

Discussion (0)

pic
Editor guide