Visual Studio Code status bar color

Question

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) Gonna save 30 minutes of time to noobs like me - it has to be edited in the settings.json file. Easiest way to acces is to 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 should be like this - note 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'.

Solution has been adapted from here: https://code.visualstudio.com/api/references/theme-color

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 VS Code status bar colors on macOS for a workspace (not globally).

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 VS 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 above answers in my opinion, and thats to change the status bar color based on the file you're working on - its called ColorTabs
and it allows you to provide a list of regexes and change that color based on that.

Disclaimer - I wrote the extension Enjoy!

You can change the color by edit extensions:

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