最可靠方式是直接修改编辑器主题CSS文件中的具体选择器，如.cm-keyword、.cm-attribute等，并需同步覆盖codemirror.css与theme.css双层样式，避免依赖CSS变量导致shadow DOM穿透失败。
直接改 theme.css 文件最可靠，别信“一键切换”插件——它们常漏掉语法高亮层或 toolbar 状态样式，导致暗色主题下按钮不可见、关键字变灰到看不清。
怎么定位并修改编辑器的主题 CSS 文件
多数现代 HTML 编辑器（如 VS Code、Brackets、CodeMirror 嵌入项目）把主题样式存在本地扩展目录里，不是网页里的 style.css。手动找错位置是失败主因。
- VS Code：打开命令面板（
Cmd+Shift+P/Ctrl+Shift+P），输入Developer: Inspect Editor Tokens and Scopes，点编辑区任意字符，就能看到当前 token 对应的 CSS 类名（如token.keyword）和它被哪条 CSS 规则命中 - Brackets：主题文件夹在
~/Library/Application Support/Brackets/extensions/user/（macOS）或%APPDATA%/Brackets/extensions/user/（Windows），找含theme.json和main.less的文件夹 - 自建 CodeMirror 编辑器：主题实际由
codemirror.css+ 自定义theme.css双层控制，必须同时覆盖.cm-s-default .cm-keyword这类带前缀的选择器，否则语法高亮不生效
深色/浅色主题必须重写的 4 类选择器
只改背景色和文字色远远不够。下面这些类名漏一个，主题就“半残”：工具栏按钮失效、行号看不清、括号匹配高亮消失、光标变透明。
-
.cm-s-default .cm-header：HTML 标签名（如<div> 中的 <code>div），深色主题下常被默认设成灰色，需显式设为#569cd6 -
.cm-s-default .cm-attribute：属性名（如class、id），浅色主题建议用#795e26，深色用#9cdcfe -
.cm-s-default .cm-string：引号内字符串，深色主题必须避开#ce9178这种低对比度橙红，改用#d7ba7d更易读 -
.cm-s-default .cm-matchhighlight：搜索匹配高亮，VS Code 默认用background: #007acc20，在深色背景上几乎隐形，得加!important改成background: #3a3a3a - 不要在
:root里定义--editor-bg然后指望.cm-editor继承——CodeMirror 用的是 iframe 或 shadow root，变量作用域断了 - VS Code 主题 JSON 里支持
editor.background这类键，但它只管容器背景，不管语法高亮；想统一换色，仍得进theme.css手动替换所有color值 - 如果项目里混用 CodeMirror 5 和 6，注意 v6 把 class 前缀从
cm-换成cm6-，旧 CSS 规则全失效，连!important都救不回来
为什么用 CSS 变量写主题反而更麻烦
看起来优雅，但实际在编辑器主题里容易失控：CSS 变量无法穿透 shadow DOM（如 VS Code 的内嵌预览窗），也无法被 CodeMirror 的 token 渲染器识别，最终你还是得写死颜色值。
立即学习“前端免费学习笔记（深入）”；
真正省事的做法是：拿官方暗色主题（如 vs-dark）的 theme.css 文件当底稿，逐行删减、只留你真正在意的 10–15 个选择器，再微调颜色——比从零写变量系统快 3 倍，且不会在某次编辑器更新后突然全白屏。
