var(--color-primary, #007bff)在编辑器初始化时失效，根本原因是CSS变量加载异步而编辑器主题初始化同步：style未注入或变量未解析前，getComputedStyle已返回fallback值，导致token高亮等逻辑错用降级色；须确保皮肤CSS提前注入、配合requestIdleCallback延时初始化，并在Monaco/CodeMirror中显式读取变量值而非依赖CSSOM解析。
为什么 var(--color-primary, #007bff) 在编辑器初始化时会失效
因为 HTML 编辑器（如 CodeMirror、Monaco、Ace）通常在 <style> 尚未注入或 CSS 自定义属性未被解析前就完成了 DOM 渲染和样式计算。此时 getComputedStyle(el).color 可能返回 fallback 值，但编辑器内部主题色逻辑若依赖该值做后续渲染（比如 token 高亮、边栏背景），就会错用 fallback 而非真实皮肤色。
关键不是语法错，而是**时机错**：CSS 变量加载异步，而编辑器主题初始化是同步的。
- 确保所有皮肤 CSS（含
:root块）在编辑器editor.create()之前已插入<head> - 避免动态
document.styleSheets插入后立即初始化编辑器；加一层requestIdleCallback或setTimeout(..., 0)等待样式表生效 - Monaco 用户需额外调用
monaco.editor.defineTheme()并显式传入颜色映射，不能只靠 CSS 变量 —— 它不读取var()fallback，只认 JS 对象里的硬编码值
如何让 var(--bg-editor, #1e1e1e) 在深色/浅色皮肤切换时不闪白
闪白本质是浏览器重绘间隙中，background-color 回退到初始透明或默认白底。fallback 本身不解决过渡问题，要靠 CSS 层级控制 + 显式过渡声明。
- 给编辑器容器（如
<div id="editor">）设一个基础背景色：background-color: #1e1e1e，作为最底层兜底，而非依赖var()的 fallback - CSS 中对皮肤变量使用
transition: background-color 0.2s ease，且确保变量更新通过document.documentElement.style.setProperty('--bg-editor', '#252526')触发，而非替换整个<style> - CodeMirror 6 用户注意：
theme插件必须返回带settings的对象，其中background字段不能写var(--bg-editor)，要提前 resolve 成实际值（可用getComputedStyle(document.documentElement).getPropertyValue('--bg-editor').trim()）
Monaco Editor 中 var() fallback 为何不参与 token 颜色计算
Monaco 的语法高亮完全基于 JS 主题定义（defineTheme），它把颜色当字符串处理，不走 CSSOM 解析流程。即使你在 .monaco-editor { color: var(--text-primary, #fff); } 里写了 fallback，token 渲染层根本看不到这行 CSS。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：在
defineTheme的rules数组里，用 JS 读取当前变量值：const textPrimary = getComputedStyle(document.documentElement).getPropertyValue('--text-primary').trim() || '#fff' - 不要在 theme 定义里写
'string': 'var(--string-color)'—— 这会被当字面量，最终渲染成黑色文字 - 皮肤切换时，必须重新调用
setTheme()，并传入新生成的 theme ID；仅改 CSS 变量无效
如何验证 fallback 是否真正“安全”生效
不能只看页面是否显示，得模拟变量缺失场景：手动删掉 :root 里的声明，再检查编辑器各区域是否仍保持可用对比度与功能完整性。
- 用 DevTools 控制台执行：
document.documentElement.style.removeProperty('--color-accent')，观察按钮、选中态、错误提示是否降级为 fallback 色且可读 - 检查
computedStyleMap()返回值中关键属性（如backgroundColor）是否为 fallback 值，而非rgba(0, 0, 0, 0)或transparent - 对支持
@supports (color: var(--x))的环境，可加一层检测逻辑：if (!CSS.supports('color', 'var(--x)')) { loadLegacyTheme(); }
