How do I set the sidebar color in vscode

Question

Seems there are two colors to the sidebar in vscode light and dark. I am wanting to use the solarized light theme but have a dark sidebar. Is there a way to do this?

Answer 1

VS Code support workbench theming now, check this

Which means, in settings we can do as below to customise colours,

"workbench.colorCustomizations": {
   "sideBar.background": "#111111"
 }

Answer 2

here is customization for each vs code window : it is helpful if you work on many project on different different vs code instanse

add a folder .vscode in your project root folder and add a file setting.json in .vscode folder then add your favorite style below example is the result of attache screenshot

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#14b197",
        "statusBar.background": "#333"
      }
}

Answer 3

Create a file named settings.json in the .vscode folder, and enter the below lines:

{
    "workbench.colorTheme": "Default Light+",
    "workbench.colorCustomizations": {
        "activityBar.background": "#e7e7e7",
        "activityBar.foreground": "#000000"
    }
}

The color value #e7e7e7 (for activity bar background) separates it from other parts so it stands out.

For global settings, add these lines in global settings.json file. My global settings.json looks as below:

{
    "workbench.editorAssociations": {
        "*.ipynb": "jupyter.notebook.ipynb"
    },
    "python.pipenvPath": "C:\\Users\\abhi\\anaconda3\\envs",
    "workbench.colorTheme": "Default Light+",
    "workbench.colorCustomizations": {
        "activityBar.background": "#e7e7e7",
        "activityBar.foreground": "#000000"
    },
    "files.autoSave": "afterDelay",
    "git.confirmSync": false,
    "terminal.integrated.defaultProfile.windows": "Command Prompt"
}

The global settings.json can be found at:

Windows: %APPDATA%\Code\User\settings.json
mac:     $HOME/Library/Application Support/Code/User/settings.json
Linux:   $HOME/.config/Code/User/settings.json

Visual Studio Code will now look as below:

Answer 4

Create a file named settings.json in the .vscode folder, and enter the below lines: you can change icons color in sidebar, comments, background color or even more as depicted in the attached picture.

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#6ff304",
    "titleBar.activeBackground": "#69e024",
    "titleBar.activeForeground": "#5809ce",
    "icon.foreground": "#91ff00",
    "symbolIcon.colorForeground": "#ff0000",
    "icon.colorForeground": "#ff0000",
    "activityBar.inactiveForeground": "#524747"
  },

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          "comment",
          "comment.block.documentation",
          "comment.block.documentation.js",
          "comment.line.double-slash.js",
          "storage.type.class.jsdoc",
          "entity.name.type.instance.jsdoc",
          "variable.other.jsdoc",
          "punctuation.definition.comment",
          "punctuation.definition.comment.begin.documentation",
          "punctuation.definition.comment.end.documentation"
        ],
        "settings": {
          "fontStyle": "italic",
          "foreground": "#78108a"
        }
      }
    ]
  }
}