'How do I set the sidebar color in vscode

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?

visual-studio-code

Solution 1:^[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"
 }

Solution 2:^[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"
      }
}

Solution 3:^[3]

I guess you may want to set the color theme of the activity bar, but that of the sidebar is the same.

You can refer to Theme Color | Visual Studio Code Extension API to check the corresponding properties of each element so that you can customize the one that you want to modify (tip: using ? + F on macOS or Ctrl + F on Windows and Linux to search keywords in that webpage would be more convenient).

Here are my Visual Studio Code color scheme configurations in the settings.json file (just for reference):

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

Result:

You can click this link to take a look at my Visual Studio Code color scheme.

Solution 4:^[4]

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:

Solution 5:^[5]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	anoop
Solution 2	Yusuf Khan
Solution 3
Solution 4
Solution 5	Farbod Aprin

'How do I set the sidebar color in vscode

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]