CODEWITHSUNDEEP
visual-studio-code
haasdev
haasdev

Reputation: 2171

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?

Upvotes: 37

Views: 38832

Answers (6)

empax
empax

Reputation: 108

If you have auto/manual switching dark/light color themes in the OS and to customize a specific theme only, use the following syntax:

{
    "window.autoDetectColorScheme": true,
    "workbench.colorTheme": "Default Light+",
    "workbench.colorCustomizations": {
        "[Default Light+]": {
            "activityBar.background": "#f3f3f3",
            "activityBar.foreground": "#333333"
        },
        "[Default Dark+]": {
            "activityBar.background": "#333333",
            "activityBar.foreground": "#f3f3f3"
        }
    }
}

Upvotes: 1

Farbod Aprin
Farbod Aprin

Reputation: 1186

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.

enter image description here

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

Upvotes: 20

senchun
senchun

Reputation: 313

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.

Upvotes: 6

Abhishek Kumar Dubey
Abhishek Kumar Dubey

Reputation: 144

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:

enter image description here

Upvotes: 7

Yusuf Khan
Yusuf Khan

Reputation: 4100

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

enter image description here

Upvotes: 8

anoop
anoop

Reputation: 3297

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

Upvotes: 33

Related Questions