改css变量后编辑器代码颜色不变，根本原因是pre/code/span等高亮元素未接入变量体系，可能使用硬编码色值或独立主题css；需统一变量定义、重写高亮库css、加强制继承并确保js/css/data-theme三者严格匹配。
直接换主题文件或改 data-theme 属性就能生效，但多数人卡在变量没继承、选择器不匹配、或编辑器内容区被忽略这三处。
为什么改了 CSS 变量，HTML 编辑器里代码颜色还是不变
根本原因是：编辑器内部的 pre、code、语法高亮用的 span 标签，往往没接入你定义的 CSS 变量体系。它们可能用了硬编码色值（比如 #2d2d2d），或依赖浏览器默认样式，而没写 color: var(--code-keyword) 这类声明。
- 检查编辑器渲染出的实际 DOM，看高亮关键词是否包裹了带 class 的
span，再查这些 class 对应的 CSS 是否用了var(--...) - 若用的是
Highlight.js或Prism.js，它们的主题 CSS 是独立加载的，不会自动读取你页面的:root变量 —— 你得手动把它们的 CSS 改成变量驱动，或用!important覆盖 - 第三方编辑器（如 Quill、Tiptap）常把高亮逻辑封装在 Shadow DOM 或内联 style 里，必须用更高权重的选择器（如
[data-theme="dark"] .hljs-keyword）或data-theme+ 属性选择器强制接管
如何让自定义主题真正控制 HTML 代码块的高亮颜色
核心动作不是“换皮肤”，而是把所有颜色出口都收归到一套变量下，并确保每个渲染层都显式引用它。
- 在
:root中统一定义语义化变量，例如：--html-tag、--html-attr、--html-string、--html-comment - 重写高亮库的 CSS 主题：下载
highlight.min.css或prism.css源码，把所有固定色值替换成对应var(--...)，并加 fallback（如color: var(--html-tag, #569cd6)） - 给编辑器容器加强制继承规则：
.editor-content * { color: inherit !important; background: transparent !important; }，避免子元素脱离主题上下文 - 若用 CodeMirror 6，别只配
@uiw/codemirror-theme-dracula，要配合htmlLanguage和defaultHighlightStyle手动绑定变量，否则高亮 token 仍走默认 palette
data-theme 切换后高亮没变？先核对这三件事
这是最常被忽略的链路断裂点：JS 设的属性值、CSS 选中的范围、编辑器实际读取的上下文，三者必须完全对齐。
- JavaScript 设置的值必须和 CSS 选择器里的字符串一模一样，包括大小写、连字符、前缀 ——
document.documentElement.setAttribute('data-theme', 'dark')和[data-theme="theme-dark"]就是不匹配 - 确保选择器作用域覆盖到编辑器内部：如果编辑器挂载在 shadow root 或 iframe 里，
[data-theme="dark"] .hljs-tag这种全局选择器无效，得用host[data-theme="dark"] .hljs-tag或提前注入样式 - 部分编辑器（如 Monaco）会把内容区域渲染为 canvas 或绝对定位的 layer，此时 CSS 变量根本不起作用，只能通过其 API（如
editor.updateOptions({ theme: 'vs-dark' })）控制
真正难的不是换颜色，而是让每一个字符、每一条边框、光标、行号、折叠图标，都响应同一个变量源 —— 这要求你从编辑器初始化那一刻起，就放弃“套现成主题”的想法，转而把它当作一个需要全链路主题接管的子系统来对待。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
