Visual Studio Code status bar color

Question

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

Answer 1

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"
}

Answer 2

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

Answer 3

Press control+shift+p when you just open vscode and type open settings(UI) and search for window.titleBarStyleand 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 vscode released in February 2019. Make sure that you have updated your vscode to the latest version 1.32 or further latest ones as it may not work for the older versions.

Answer 4

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.

Answer 5

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!

Answer 6

There is one more extension available https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock to change the color of the workplace. It allows you to choose a different color for every vs code instance