Visual Studio Code status bar color

Visual Studio Code's default status bar color is blue, and I find it quite distracting. I used this extension to change the color, but it has stopped working after the 1.10.2 update.

You can change the colour of the statusbar by editing the user settings by adding these lines of code in it:

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
}

1. I am going to save 30 minutes of time to noobs like me - it has to be edited in the settings.json file. The easiest way to access it is menu command File → Preferences → Settings, search for "Color", choose an option "Workbench: Color Customizations" → "Edit in settings.json".

2. This uses the solution proposed by Gama11, but note:
   the final form of the code in the settings.json file should be like this - note the double curly braces around "workbench.colorCustomizations":

    {
      // fontSize just for testing purposes, commented out.
      //"editor.fontSize" : 12
   
      // StatusBar color:
         "workbench.colorCustomizations": {
         "statusBar.background" : "#303030",
         "statusBar.noFolderBackground" : "#222225",
         "statusBar.debuggingBackground": "#511f1f"
        }
    }
   

After you copy/pasted code above, press Ctrl + S to save the changes to 'settings.json'.

The solution has been adapted from Status Bar colors.

Since every theme is so different, you probably don't want to make changes like this globally. Instead, specify them on a per-theme basis: e.g.:

"workbench.colorCustomizations": {
    "[Some Theme Name]": {
        "statusBar.background" : "#486357",
        "statusBar.foreground" : "#c8e9c5",
    },
    "[Some Other Theme Name]": {
        "statusBar.background" : "#385357",
        "statusBar.foreground" : "#d7e9c4",
    }
},

That way when you switch between your favorite themes, your customizations of them will not be forgotten, and will make sense in that context.

These are the steps I took to set the Visual Studio Code status bar colors on macOS for a workspace (not globally).

Menu View → Command Palette... → search for "Open Workspace Settings (JSON)".

(This will open the project [project-name].code-workspace file.)

Add the color customizations in the settings property.

{
    "folders": [],
    "settings": {
        "workbench.colorCustomizations": {
            "statusBar.background": "#938e04",
            "statusBar.foreground": "#ffffff"
        }
    }
}

This is really useful when you have multiple instances of Visual Studio Code open and want to visually differentiate each window without having to change the global theme.

There is a stronger, more robust solution than the previous answers in my opinion, and that’s to change the status bar color based on the file you're working on—it’s called ColorTabs, and it allows you to provide a list of regular expressions and change that color based on that.

_{Disclaimer - I wrote the extension.}

I just registered so I can't comment directly on HelloWorldDude's reply, but that's exactly what I was looking for: Different colors per workspace to quickly differentiate between Visual Studio Code windows.

I'm on Windows 10 with Visual Studio Code 1.63.1 and the per-project setting is located in the .vscode folder of the project root, and the file itself is settings.json.

The syntax that worked for me does not include "folders" and "settings", but just the contents of the settings block, like so:

{
  "workbench.colorCustomizations": {
      "statusBar.background": "#7c0101",
      "statusBar.foreground": "#ffffff"
  }


}

You can change the color by edit extensions:

 "colors":{
		"statusBar.background": "#505050",
	},

There is one more extension available, Peacock, to change the color of the workplace. It allows you to choose a different color for every Visual Studio Code instance.

If you are using the Vim plugin, the best way to change status bar color depending on mode is to go to settings, search for "status bar color" and check "allow Visual Studio Code to change color based on mode"

Here is a snapshot of the Vim plugin status color control:

Press Control + Shift + P when you just open Visual Studio Code and type "open settings(UI)" and search for window.titleBarStyle and change the option from native to custom so that you can restore the colour of status bar from white to black.

Important note: This technique works for update version 1.32 of Visual Studio Code released in February 2019. Make sure that you have updated your Visual Studio Code to the latest version 1.32 or further latest ones as it may not work for the older versions.