修改VSCode主题需理解token和TextMate规则。在settings.json中用editor.tokenColorCustomizations调整字符串、注释等颜色；通过textMateRules按作用域精细控制，如variable.other.property.js；使用Developer: Inspect Editor Tokens and Scopes命令获取作用域；创建新主题可用yo code生成模板，编辑theme.json定义colors和tokenColors，最后加载切换主题。
在 VSCode 中自定义颜色主题和语法高亮规则，能显著提升编码体验。你既可以修改现有主题的显示效果，也可以创建全新的主题。关键在于理解 color tokens 和 TextMate 语法规则 的作用机制。
如何修改当前主题的颜色高亮
如果你只是想微调某个已安装主题的语法颜色（比如让字符串更显眼或注释变浅），可以直接在 settings.json 中使用 editor.tokenColorCustomizations 配置：
{
"editor.tokenColorCustomizations": {
"strings": "#FF79C6",
"comments": {
"fontStyle": "italic",
"foreground": "#6272A4"
},
"keywords": "#BD93F9"
}
}
上面的配置会覆盖当前主题对字符串、注释和关键字的默认样式。支持的 token 类型包括：strings, comments, keywords, numbers, functions, types 等常见语法元素。
使用 TextMate 规则精细控制高亮
某些语言的语法结构无法通过简单 token 覆盖实现理想高亮，这时需要使用 textMateRules。它基于正则匹配作用域（scope），适用于所有主题或指定主题。
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "variable.other.property.js",
"settings": {
"foreground": "#50FA7B",
"fontStyle": "bold"
}
},
{
"scope": "meta.function.parameters",
"settings": {
"foreground": "#FFB86C"
}
}
]
}
}
要找到正确的 scope，打开命令面板（Ctrl+Shift+P），运行 Developer: Inspect Editor Tokens and Scopes，然后点击代码中的任意位置，VSCode 会显示该字符的完整作用域链。
创建自定义颜色主题
若想从头构建专属主题，可在扩展中定义 theme。步骤如下：
- 使用 Yeoman 生成器创建 VSCode 扩展模板：
yo code→ 选择“New Color Theme” - 编辑生成的
.json主题文件，设置基础颜色（如背景、字体、边栏等） - 在
tokenColors数组中添加 TextMate 规则，定义各类语法元素的显示样式 - 发布或本地加载后，在设置中切换到你的主题
主题文件核心结构示例：
{
"name": "My Custom Theme",
"type": "dark",
"colors": {
"editor.background": "#1E1E1E",
"editor.foreground": "#D4D4D4"
},
"tokenColors": [
{
"scope": ["string"],
"settings": { "foreground": "#CE9178" }
}
]
}
基本上就这些。通过组合 tokenColorCustomizations 和作用域规则，你可以精确控制每一类语法的颜色与样式，无需编写完整主题也能实现个性化高亮。关键是多用“Inspect Scopes”工具查作用域，再针对性设置。不复杂但容易忽略细节。
