制作VS Code自定义主题时，如何查找UI元素的作用域？

• 用开发者工具调试UI
  打开VS Code的Developer: Toggle Developer Tools命令（快捷键Ctrl+Shift+I / Cmd+Opt+I），调出Chrome风格的调试面板。用元素选择器点击目标UI元素（比如代码行侧边的变更标记），在Elements面板里查看对应的CSS变量，这些变量名和主题JSON里的作用域一一对应。比如变更行高亮，你会看到--vscode-editorGutter-modifiedBackground这类变量，对应的主题键就是editorGutter.modifiedBackground。

• 查阅官方主题颜色参考
  VS Code官方整理了全量UI相关的颜色作用域，覆盖窗口、侧边栏、状态栏、Git装饰等所有非编辑器区域。比如Git相关作用域集中在gitDecoration前缀下，包含修改、新增、删除行的颜色设置；编辑器 gutter 相关的在editorGutter前缀下。

• 参考成熟主题的配置
  找热门自定义主题（比如One Dark Pro、Solarized），打开它们的theme.json文件，搜索你关注的UI元素关键词（如"modified"、"git"），直接参考对应的配置键值对。这种方法能快速定位目标作用域，还能学习主题的整体配置逻辑。

举个针对变更行高亮的配置示例：

{
  "editorGutter.modifiedBackground": "#e6db74",
  "gitDecoration.modifiedResourceForeground": "#e6db74"
}

内容的提问来源于stack exchange，提问作者Aiden