自定义 VS Code 界面颜色：修改 Explorer 背景颜色及其他设置

原创已于 2025-02-20 08:53:21 修改 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #vscode

于 2025-02-19 17:12:12 首次发布

VS Code 专栏收录该内容

3 篇文章

订阅专栏

VS Code 提供了强大的自定义功能，允许用户通过修改 settings.json 文件来调整编辑器的外观和行为。本文将详细介绍如何通过 workbench.colorCustomizations 配置项修改 VS Code 的界面颜色，包括 Explorer 背景颜色、状态栏颜色、标题栏颜色等。

1. 修改 `settings.json` 文件

要自定义 VS Code 的界面颜色，需要在 settings.json 文件中添加 workbench.colorCustomizations 配置项。以下是具体的配置示例及其作用：

"workbench.colorCustomizations": {
  // 修改活动栏（Activity Bar）的背景颜色
  "activityBar.background": "#320342",

  // 修改活动栏中选中项的背景颜色
  "activityBar.activeBackground": "#475068",

  // 修改活动栏中文字和图标的颜色
  "activityBar.foreground": "#8dff02",

  // 修改标题栏（Title Bar）的背景颜色
  "titleBar.activeBackground": "#320342",

  // 修改标题栏中文字的颜色
  "titleBar.activeForeground": "#7fc12e",

  // 修改状态栏（Status Bar）的背景颜色
  "statusBar.background": "#320342",

  // 修改状态栏中文字的颜色
  "statusBar.foreground": "#7fc12e",

  // 修改编辑器中当前行缩进线的颜色
  "editorIndentGuide.activeBackground1": "#c678dd",

  // 修改文件资源管理器（Explorer）中缩进线的颜色
  "tree.indentGuidesStroke": "#84a316"
}

2. 配置项详解

以下是每个配置项的详细说明：

2.1 活动栏（Activity Bar）

activityBar.background：活动栏的背景颜色。
activityBar.activeBackground：活动栏中选中项的背景颜色。
activityBar.foreground：活动栏中文字和图标的颜色。

2.2 标题栏（Title Bar）

titleBar.activeBackground：标题栏的背景颜色。
titleBar.activeForeground：标题栏中文字的颜色。

2.3 状态栏（Status Bar）

statusBar.background：状态栏的背景颜色。
statusBar.foreground：状态栏中文字的颜色。

2.4 编辑器（Editor）

editorIndentGuide.activeBackground1：编辑器中当前行缩进线的颜色。

2.5 文件资源管理器（Explorer）

tree.indentGuidesStroke：文件资源管理器中缩进线的颜色。

3. 如何应用配置

打开 VS Code 的设置：
- 使用快捷键 Ctrl + ,（Windows/Linux）或 Cmd + ,（Mac）。
- 或者点击左侧齿轮图标，选择“设置”。
打开 settings.json 文件：
- 在设置界面右上角，点击“打开设置 (JSON)”图标。
将上述配置项粘贴到 settings.json 文件中，并根据需要修改颜色值。
保存文件，VS Code 的界面颜色将立即生效。

4. 颜色值格式

颜色值可以使用以下格式：

十六进制：例如 #320342。
RGB：例如 rgb(50, 3, 66)。
RGBA：例如 rgba(50, 3, 66, 0.5)。

5. 示例效果

以下是一个完整的 settings.json 文件示例：

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#320342",
    "activityBar.activeBackground": "#475068",
    "activityBar.foreground": "#8dff02",
    "titleBar.activeBackground": "#320342",
    "titleBar.activeForeground": "#7fc12e",
    "statusBar.background": "#320342",
    "statusBar.foreground": "#7fc12e",
    "editorIndentGuide.activeBackground1": "#c678dd",
    "tree.indentGuidesStroke": "#84a316"
  }
}