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.

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

回答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

回答3:

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.

回答4:

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!

回答5:

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.

回答6:

You can change the color by edit extensions:

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

回答7:

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.

回答8:

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

来源：https://stackoverflow.com/questions/42780975/visual-studio-code-status-bar-color

标签

visual-studio-code

background-color

statusbar