Workbench 颜色详解

colors 键控制 Workbench 全部 UI 组件的颜色。掌握键名体系与配色思路，才能设计出协调的主题。

键名规则

Workbench 颜色键遵循 组件.部位 的命名：

text

editor.background
└─组件─┘└──部位──┘

list.activeSelectionBackground
└组件┘└───修饰词───┘└─部位─┘

按组件前缀分组，每个组件有 background/foreground/border 等通用部位。本文按区域梳理高频键。

editor 系列（编辑器核心）

编辑器是用户视线焦点，键最多也最重要：

json

{
  "editor.background": "#0d1117",
  "editor.foreground": "#c9d1d9",
  "editor.lineHighlightBackground": "#161b22",
  "editor.selectionBackground": "#264f78",
  "editor.selectionForeground": "#ffffff",
  "editor.wordHighlightBackground": "#373b41",
  "editorCursor.foreground": "#58a6ff",
  "editorCursor.background": "#0d1117",
  "editorWhitespace.foreground": "#3b4048",
  "editorIndentGuide.background": "#21262d",
  "editorIndentGuide.activeBackground": "#30363d",
  "editorRuler.foreground": "#21262d",
  "editor.foldBackground": "#1a1f29",
  "editorWidget.background": "#161b22",
  "editorWidget.border": "#30363d",
  "editorHoverWidget.background": "#161b22",
  "editorSuggestWidget.background": "#161b22"
}

选区与高亮

键	用途
`editor.selectionBackground`	光标选区背景
`editor.wordHighlightBackground`	相同单词高亮（Ctrl+D 选择后）
`editor.findMatchBackground`	查找结果高亮
`editor.lineHighlightBackground`	当前行高亮
`editorCursor.foreground`	光标颜色
`editorBracketMatch.background`	括号匹配背景

行号与装订区

json

{
  "editorLineNumber.foreground": "#6e7681",
  "editorLineNumber.activeForeground": "#c9d1d9",
  "editorLineNumber.dimmedForeground": "#484f58",
  "editorGutter.background": "#0d1117",
  "editorGutter.modifiedBackground": "#1f6feb",
  "editorGutter.addedBackground": "#238636",
  "editorGutter.deletedBackground": "#da3633",
  "editorOverviewRuler.border": "#010409"
}

侧边栏承载资源管理器、搜索、扩展等视图：

json

{
  "sideBar.background": "#010409",
  "sideBar.foreground": "#c9d1d9",
  "sideBar.border": "#30363d",
  "sideBarSectionHeader.background": "#010409",
  "sideBarSectionHeader.foreground": "#c9d1d9",
  "sideBarTitle.foreground": "#c9d1d9"
}

titleBar 与 statusBar

json

{
  "titleBar.activeBackground": "#010409",
  "titleBar.activeForeground": "#c9d1d9",
  "titleBar.inactiveBackground": "#010409",
  "titleBar.inactiveForeground": "#6e7681",
  "statusBar.background": "#010409",
  "statusBar.foreground": "#c9d1d9",
  "statusBar.border": "#30363d",
  "statusBarItem.hoverBackground": "#161b22",
  "statusBarItem.errorBackground": "#da3633",
  "statusBarItem.warningBackground": "#d29922"
}

状态栏的键位还分 statusBar.debuggingBackground、statusBar.noFolderBackground 等场景变体，根据状态切换底色。

activityBar 系列（活动栏）

活动栏是最左侧的图标栏：

json

{
  "activityBar.background": "#010409",
  "activityBar.foreground": "#c9d1d9",
  "activityBar.inactiveForeground": "#6e7681",
  "activityBarBadge.background": "#1f6feb",
  "activityBarBadge.foreground": "#ffffff",
  "activityBar.activeBorder": "#58a6ff",
  "activityBar.border": "#30363d"
}

activityBarBadge 控制图标上的数字徽章（如 Git 未提交数）。

tab 系列（编辑器标签）

json

{
  "tab.activeBackground": "#0d1117",
  "tab.activeForeground": "#c9d1d9",
  "tab.activeBorderTop": "#58a6ff",
  "tab.inactiveBackground": "#010409",
  "tab.inactiveForeground": "#6e7681",
  "tab.hoverBackground": "#0d1117",
  "tab.border": "#30363d",
  "tab.unfocusedActiveBackground": "#0d1117"
}

activeBorderTop 是当前标签顶部的强调线，很多主题用它做视觉焦点。

list 系列（列表）

列表无处不在：资源管理器、快速选择、命令面板：

json

{
  "list.background": "#010409",
  "list.foreground": "#c9d1d9",
  "list.hoverBackground": "#161b22",
  "list.activeSelectionBackground": "#1f6feb",
  "list.activeSelectionForeground": "#ffffff",
  "list.inactiveSelectionBackground": "#161b22",
  "list.focusBackground": "#161b22",
  "list.focusForeground": "#c9d1d9",
  "list.highlightForeground": "#58a6ff",
  "list.errorForeground": "#f85149",
  "list.warningForeground": "#d29922"
}

键	场景
`list.hoverBackground`	鼠标悬停
`list.activeSelectionBackground`	当前选中（窗口聚焦）
`list.inactiveSelectionBackground`	当前选中（窗口失焦）
`list.highlightForeground`	过滤匹配文字高亮
`list.focusBackground`	键盘焦点项

input 与 button 系列

json

{
  "input.background": "#010409",
  "input.foreground": "#c9d1d9",
  "input.border": "#30363d",
  "input.placeholderForeground": "#6e7681",
  "inputValidation.errorBackground": "#da3633",
  "inputValidation.errorForeground": "#ffffff",
  "inputValidation.errorBorder": "#da3633",
  "inputValidation.warningBorder": "#d29922",
  "inputValidation.infoBorder": "#1f6feb",
  "button.background": "#238636",
  "button.foreground": "#ffffff",
  "button.hoverBackground": "#2ea043",
  "button.border": "#30363d",
  "button.secondaryBackground": "#30363d",
  "button.secondaryForeground": "#c9d1d9",
  "button.secondaryHoverBackground": "#3b4048"
}

输入校验颜色（inputValidation.*）自动用于 QuickPick 和设置页的错误提示。

编辑器组件细节

差异编辑器

json

{
  "diffEditor.insertedTextBackground": "#1c4b1d",
  "diffEditor.removedTextBackground": "#5f1f1f",
  "diffEditor.insertedLineBackground": "#101f10",
  "diffEditor.removedLineBackground": "#1f1010",
  "diffEditor.diagonalFill": "#24292f"
}

终端

json

{
  "terminal.background": "#0d1117",
  "terminal.foreground": "#c9d1d9",
  "terminal.ansiBlack": "#0d1117",
  "terminal.ansiRed": "#ff7b72",
  "terminal.ansiGreen": "#3fb950",
  "terminal.ansiYellow": "#d29922",
  "terminal.ansiBlue": "#58a6ff",
  "terminal.ansiMagenta": "#bc8cff",
  "terminal.ansiCyan": "#39c5cf",
  "terminal.ansiWhite": "#c9d1d9",
  "terminal.ansiBrightBlack": "#6e7681"
}

编辑器内嵌提示

json

{
  "editorInlayHint.background": "#0d1117",
  "editorInlayHint.foreground": "#8b949e",
  "editorInlayHint.parameterForeground": "#79c0ff",
  "editorInlayHint.typeForeground": "#8b949e"
}

配色思路

设计一套协调的主题，遵循"三层 + 一强调"的结构：

1. 背景层级

背景要有清晰的层级差，避免界面"糊"成一片：

json

{
  "editor.background": "#0d1117",
  "sideBar.background": "#010409",
  "tab.activeBackground": "#0d1117",
  "tab.inactiveBackground": "#010409"
}

层级	亮度	用途
最深	最暗	侧边栏/状态栏（衬托编辑器）
中间	中等	编辑器背景
最浅	最亮	当前标签/悬停项

2. 文字对比

前景色与背景对比度应满足 WCAG AA（4.5:1）：

json

{
  "editor.foreground": "#c9d1d9",
  "editorLineNumber.foreground": "#6e7681",
  "list.inactiveSelectionForeground": "#c9d1d9"
}

辅助文字（行号、占位符）用中灰，主文字用高亮灰。

3. 功能色统一

强调色、成功色、错误色全主题统一：

json

{
  "editorCursor.foreground": "#58a6ff",
  "list.highlightForeground": "#58a6ff",
  "tab.activeBorderTop": "#58a6ff",
  "button.background": "#238636",
  "editorGutter.addedBackground": "#238636",
  "editorGutter.deletedBackground": "#da3633",
  "statusBarItem.errorBackground": "#da3633"
}

同一语义的颜色（如"蓝色=交互强调"）在全部组件保持一致，用户心智负担最小。

继承与覆盖

colors 中未声明的键自动继承基础主题（由 uiTheme 决定）。主题作者只需覆盖差异项，不必写全几百个键：

json

{
  "uiTheme": "vs-dark",
  "colors": {
    // 只需覆盖与默认暗色主题不同的地方
    "editor.background": "#16181d",
    "sideBar.background": "#121417"
  }
}

用户可以进一步用 workbench.colorCustomizations 覆盖你的主题，最终渲染顺序：

text

基础主题（vs-dark/vs）
  → 主题 colors
    → 用户 colorCustomizations
      → 主题特定覆盖 [主题名]

Workbench 颜色体系覆盖了界面的每个像素，下一步把配色从 UI 延伸到代码 Token 的着色。

Workbench 颜色详解 ​

键名规则 ​

editor 系列（编辑器核心） ​

选区与高亮 ​

行号与装订区 ​

sideBar 系列（侧边栏） ​

titleBar 与 statusBar ​

activityBar 系列（活动栏） ​

tab 系列（编辑器标签） ​

list 系列（列表） ​

input 与 button 系列 ​

编辑器组件细节 ​

差异编辑器 ​

终端 ​

编辑器内嵌提示 ​

配色思路 ​

1. 背景层级 ​

2. 文字对比 ​

3. 功能色统一 ​

继承与覆盖 ​

Workbench 颜色详解

键名规则

editor 系列（编辑器核心）

选区与高亮

行号与装订区

sideBar 系列（侧边栏）

titleBar 与 statusBar

activityBar 系列（活动栏）

tab 系列（编辑器标签）

list 系列（列表）

input 与 button 系列

编辑器组件细节

差异编辑器

终端

编辑器内嵌提示

配色思路

1. 背景层级

2. 文字对比

3. 功能色统一

继承与覆盖