🌈 VSCode Workbench Color Customization

2 min readOct 19, 2019

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.