🌈 VSCode Workbench Color Customization

A cool thing that I have learned about VSCode Workspaces today is that you can make them different colours. Yes! This cute little feature I found really useful because I often find myself running few instances at the same time.

So this can be achieved in few steps:

  • make sure you have Title Bar Style set to custom (hit Cmd + , to get to VSCode settings page and search for the word title)
  • then switch to Workspace tab and edit the settings.json
  • after you click on Edit in settings.json you will see the following
{ "folders": [  {    "path": "path_to_your_project"  } ], "settings": {}}

and you need to paste the following configuration inside settings like this:

{ "folders": [  {   "path": "path_to_your_project"  } ], "settings": {  "workbench.colorCustomizations":   {     "titleBar.activeForeground": "#color_of_your_choice",     "titleBar.inactiveForeground": "#color_of_your_choice",     "titleBar.activeBackground": "#color_of_your_choice",     "titleBar.inactiveBackground": "#color_of_your_choice",   }  }}

That’s how my main workspace looks now


Everything is unknown until it’s known. Self-learner.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store