直接改 .syntax-keyword 类没反应，是因为现代编辑器（如 VS Code）使用 TextMate scope 机制而非静态类名进行语法高亮，实际 DOM 类名动态多变；应通过开发者工具查真实 scope（如 keyword.control.js），并在 editor.tokenColorCustomizations 中精准配置。
为什么直接改 .syntax-keyword 类没反应
常见现象是：在编辑器主题 CSS 里写了 .syntax-keyword { color: #569cd6; }，保存后重启编辑器，但 function、if 这类关键字颜色还是老样子。根本原因是多数现代 HTML 编辑器（如 VS Code、Nova、WebStorm）不靠传统 CSS 类名做语法高亮，而是用 TextMate 语法规则 + scope 机制匹配代码结构，最终生成的 DOM 节点 class 名可能是 token keyword control 或带哈希后缀的动态类，不是你手写的那个静态类名。
实操建议如下：
- 先打开编辑器的「开发者工具」（通常 Ctrl+Shift+I），选中一个关键字，看它实际的 class 或
data-token属性值 - 查编辑器文档确认语法 scope 命名规范，例如 VS Code 中 JavaScript 的
if是keyword.control.js - 在主题 CSS 中用对应 scope 写规则，比如：
.monaco-editor .token.keyword.control { color: #c792ea !important; } - 避免用
!important除非必要——某些编辑器会注入内联 style 覆盖你的 CSS
editor.tokenColorCustomizations 比写 CSS 更可靠
VS Code 等基于 Monaco 的编辑器提供官方配置项 editor.tokenColorCustomizations，它绕过 CSS 层，直接干预 token 渲染逻辑，优先级更高、更稳定。
在 settings.json 中添加：
立即学习“前端免费学习笔记（深入）”；
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": ["keyword", "keyword.control"],
"settings": { "foreground": "#569cd6" }
},
{
"scope": ["string", "string.quoted.double.html"],
"settings": { "foreground": "#ce9178" }
}
]
}注意点：
-
scope值必须准确，大小写敏感，多个 scope 用数组；可查官方语言 grammar 定义或插件文档 - HTML 标签名（如
div、span）属于entity.name.tag.html，不是keyword - 修改后无需重启，保存即生效；但若加了新 scope 且之前没加载过该语言，可能需重开文件
- 别把整个配色塞进
settings.json—— 复杂主题建议拆成单独 JSON 文件再用include引入
HTML 标签名和属性名要分两套规则配色
很多人以为 <div class="btn"> 里 div 和 class 是一类词，其实它们在语法树里归属不同 scope，强行统一配色会丢失语义区分度。
典型分离方案：
- 标签名（
div、p、section）→entity.name.tag.html→ 推荐蓝紫色系，如#61affe - 属性名（
class、id、data-*）→entity.other.attribute-name.html→ 推荐青绿色系，如#7fdbca - 属性值（
"btn"、'header'）→string.quoted.html→ 保持标准字符串色#ce9178 - 事件属性（
onclick、oninput）→ 单独设为keyword.event.html，用橙红色突出交互性
漏掉 entity.other.attribute-name.html 是最常被忽略的一环——大量用户只调了标签色，结果所有属性名灰扑扑地混在文本里，可读性反而下降。
自定义主题后 HTML 预览颜色不一致怎么办
编辑器里看到的 <h1> 是蓝色，但浏览器里渲染出来却是黑色，这不是配色错了，是两套系统在工作：编辑器配的是「源码的语法高亮」，浏览器渲染的是「运行时的实际样式」。
关键区别：
- 编辑器主题控制的是
<h1>这几个字符怎么显示（即 HTML 源码文本的着色） - 浏览器里
<h1>的颜色由页面 CSS 中的h1 { color: ... }决定，和编辑器主题完全无关 - 如果你希望「编辑器里看到的标签色 = 浏览器里最终呈现的颜色」，只能手动对齐：比如把
entity.name.tag.html设为和你 CSS 中h1相同的色值 - 但更合理做法是接受这种分离——编辑器负责可读性，浏览器负责表现力；强行统一反而会让 HTML、JS、CSS 混合文件里的不同语言 token 难以分辨
真正容易被忽略的，是 style 标签内部的 CSS 规则——它在编辑器里走的是 CSS 语法高亮逻辑，不是 HTML 逻辑，所以 color: red; 里的 red 是颜色名 token，不是 HTML 标签名，得去配 CSS 主题部分，而不是 HTML 主题部分。
