如何在vscode中设置侧边栏颜色

Question

看起来 vscode 侧边栏有两种颜色：浅色和深色。我想要使用 solarized 浅色主题，但是想要一个深色的侧边栏。有没有方法可以实现这个效果？

- haasdev

Answer 1

现在VS Code支持工作台主题，查看此链接

这意味着，在设置中我们可以按照以下方式自定义颜色：

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

- anoop

Answer 2

在 .vscode 文件夹中创建名为 settings.json 的文件，并输入以下内容：

您可以根据附图所示更改侧边栏、注释、背景颜色甚至更多的图标颜色。

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

- Farbod Aprin

---

现在它位于 Code 文件夹下 - %appdata%\Code\User\settings.json。 - shadowz1337

你是怎么在侧边栏中得到蓝色文件夹图标的？ - shadowz1337

这个应该很有名！唯一更酷的事情就是如果有人拿这个做一个网页，展示设置，就像点击一个元素一样，然后可以自定义工作区的颜色。 - undefined

我可以在哪里找到更多类似的插图图片？ - undefined

Answer 3

每个 VS Code 窗口都可以进行自定义：如果你在不同的 VS Code 实例上工作多个项目，这将非常有帮助。

在你的项目根目录中添加一个名为 .vscode 的文件夹，并在其中添加一个名为 setting.json 的文件。然后添加以下内容（示例结果如下图所示）。

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

- Yusuf Khan

Answer 4

在.vscode文件夹中创建名为settings.json的文件，并输入以下内容：

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

颜色值#e7e7e7（用于活动栏背景）使其与其他部分区分开来，因此它更加突出。

对于全局设置，请在全局settings.json文件中添加以下行。 我的全局settings.json 如下所示：

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

全局的 settings.json 文件可在以下位置找到：

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的外观如下所示：

- Abhishek Kumar Dubey

Answer 5

我猜你想设置“活动栏”的颜色主题，但是“侧边栏”的颜色与其相同。

你可以参考 Theme Color | Visual Studio Code Extension API 来查看每个元素对应的属性，从而自定义想要修改的元素（提示：在该网页中使用 macOS 上的 ⌘ + F 或 Windows、Linux 上的 Ctrl + F 搜索关键字会更方便）。

下面是我的Visual Studio Code颜色方案配置（仅供参考）在 settings.json 文件中。

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

结果：

你可以点击此链接查看我的 Visual Studio Code 配色方案。

- senchun

Answer 6

如果您的操作系统具有自动/手动切换暗/亮色主题功能，并且想要仅自定义特定主题，请使用以下语法：

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

- empax