PAYATHON 2026

如何查找 VS Code 中 UI 元素对应的 scope？

技术老齐

可以用开发者工具检查 VS Code 的 UI 元素，查找它使用的主题颜色标识符（Color ID），例如 editorGutter.modifiedBackground。Developer: Inspect Editor Tokens and Scopes 主要用于检查代码文本的语法和语义高亮，不能用来检查整个窗口的 UI。

如果你说的“Changed Lines”是代码左侧表示源代码管理改动的色条，对应的颜色键是 editorGutter.modifiedBackground。官方颜色参考

先区分 scope 和 UI 颜色标识符

制作主题时，代码高亮和 UI 配色使用不同的配置：

要修改的内容使用的配置
注释、字符串等代码文本的语法高亮tokenColors 中的 TextMate scope
代码文本的语义高亮semanticTokenColors
侧边栏、状态栏、编辑器改动标记等界面颜色colors 中的 Color ID

编辑器内的元素也不一定属于 Token。例如，行号和改动标记都有各自的 UI 颜色配置。官方主题开发指南

用开发者工具定位 UI 元素

在桌面版 VS Code 中，执行 Developer: Toggle Developer Tools 可以打开用于检查界面的开发者工具。官方调试说明

  1. 打开命令面板，执行 Developer: Toggle Developer Tools。
  2. 在开发者工具中切换到 Elements 面板。
  3. 点击左上角的元素选择按钮，再点击 VS Code 中要检查的元素。
  4. 查看 Styles 中控制颜色的规则，重点检查 color、background-color、border-color，以及 ::before、::after 伪元素。
  5. 如果规则使用了以 --vscode- 开头的 CSS 变量，就可以据此查找对应的 Color ID。

例如，规则中引用的变量是：

var(--vscode-editorGutter-modifiedBackground)

对应的主题颜色键就是：

editorGutter.modifiedBackground

这类变量名以 --vscode- 开头，并将 Color ID 中的 . 替换为 -。找到候选颜色键后，再通过颜色参考或 JSON 自动补全确认用途。DOM 的 class 名不能直接当作主题配置键。官方 CSS 变量命名说明

修改 Changed Lines 的颜色

编辑器左侧的源代码管理改动标记常用以下颜色键：

标记Color ID
已修改行editorGutter.modifiedBackground
新增行editorGutter.addedBackground
删除位置editorGutter.deletedBackground

这些名称及用途可以在 Theme Color Reference 中查到。

在自己的主题 JSON 文件中，将它们写入顶层 colors 对象：

{
  "name": "My Theme",
  "type": "dark",
  "colors": {
    "editorGutter.modifiedBackground": "#E5C07B",
    "editorGutter.addedBackground": "#98C379",
    "editorGutter.deletedBackground": "#E06C75"
  },
  "tokenColors": []
}

如果想先确认颜色键是否选对，可以在用户 settings.json 中添加：

{
  "workbench.colorCustomizations": {
    "editorGutter.modifiedBackground": "#FF00FF"
  }
}

保存后，这项颜色覆盖会直接应用到当前主题。确认目标色条发生变化后，再将颜色写入主题文件的 colors。官方配色自定义说明

查看可配置颜色的完整列表

查找 UI 配色时，可以使用以下两种方式：

  • 打开 Theme Color Reference，按界面区域查找，例如 editorGutter、sideBar、statusBar。
  • 在 settings.json 的 workbench.colorCustomizations 对象内触发 IntelliSense，查看颜色键及说明。官方主题设置文档

主题文件建议使用 -color-theme.json 后缀，例如 my-color-theme.json，以获得主题配置的自动补全和悬停提示。扩展注册的额外 Color ID 也会出现在相应的补全列表中。官方主题文件说明

注意检查目标所在的位置

开发者工具可以帮助定位界面元素，但并非每个元素都有独立、可配置的 Color ID。有些元素共享颜色，有些颜色由代码计算，遇到这些情况需要继续查阅颜色参考或相关实现。

左侧 gutter 的改动色条、右侧概览标尺中的标记，以及 diff 编辑器内的文本背景，使用不同位置的配色配置。上面的 editorGutter.* 示例针对左侧改动标记。如果修改颜色后目标没有变化，应先确认选中的区域是否正确。

在开发者工具中直接修改 CSS 只适合临时验证。需要保存并随主题分发的颜色，应写入主题 JSON 的 colors。

备注：内容仅供参考。