如何配置VSCode颜色属性？从零开始打造个性化主题？

本文共计845个文字，预计阅读时间需要4分钟。

VSCode自定义主题并非只是改几个颜色值就能生效的——它需要同时提供colors和tokenColors两个顶层字段，二者缺一不可。否则，整个主题文件将会被默认忽略。

为什么只配 colors 没效果？

很多人新建一个 theme.json，只填了侧边栏、编辑器背景等 UI 色，结果代码语法还是默认蓝黄。这是因为 VSCode 主题系统强制要求双层结构：

• colors 控制 UI 元素：如 sideBar.background、tab.activeBackground，键名必须是官方预定义 color ID（不能自创）
• tokenColors 控制代码着色：是数组，每项含 scope（TextMate 作用域）和 settings（foreground、fontStyle 等）
• 两者缺一，VSCode 直接跳过加载该主题，不报错也不提示

怎么精准拿到 scope？别猜，用内置工具

想改函数名颜色，但不知道该写 support.function 还是 support.function.builtin.js？靠文档查或网上搜效率低还容易错。

• 把光标停在目标代码上（比如一个 console.log() 中的 log）
• 按 Ctrl+Shift+P（macOS 为 Cmd+Shift+P），运行 Developer: Inspect Editor Tokens and Scopes
• 面板里会显示完整 scope 链，例如：support.function.console.js → support.function.console → support.function
• 优先用最具体的那一项（如 support.function.console.js），避免误影响其他语言或上下文

tokenColors 配置常见陷阱

即使 scope 写对了，颜色也可能不生效，问题常出在细节：

• fontStyle 只接受 "italic"、"bold"、"underline" 或空字符串，不支持 "bold italic" 这类组合写法
• 透明度必须用带 alpha 的十六进制格式，如 #RRGGBBAA；写成 #RRGGBB 或 rgba() 会丢掉透明效果
• 某些 scope（如 keyword）在不同语言中语义不同：TypeScript 的 interface 属于 storage.type.ts，不是通用 keyword
• 如果当前语言模式没正确识别（右下角显示 “Plain Text”），所有 tokenColors 规则都会失效

package.json 中 uiTheme 必须设为 vs-dark 或 vs

主题扩展的 package.json 里，contributes.themes.uiTheme 字段不能留空或填自定义值：

• 填 "vs-dark" 表示适配深色工作台（UI 控件用深色系）
• 填 "vs" 表示适配浅色工作台
• 填错（如 "my-dark"）会导致主题无法启用，VSCode 启动时可能直接跳过该扩展
• 这个字段只影响 UI 部分渲染逻辑，不影响 tokenColors 生效

真正难的不是写配置，而是理解 VSCode 把“界面颜色”和“代码着色”拆成两套独立系统这件事——它们各自走不同 pipeline，互不覆盖，也互不兜底。漏掉任一层，主题就只剩半边脸。