主题切换必须用 :root 声明 css 变量，因其是全局作用域起点，确保所有后代元素可访问；需显式继承 color、background 等属性，并为 contenteditable 元素单独设置 caret-color；推荐通过 class 切换主题而非动态 setproperty，避免重绘抖动，且须将编辑器内所有视觉元素（代码块、表格、图片等）统一接入变量体系。

主题切换必须用 :root 声明 CSS 变量

直接在 或某个容器上设变量，color、background 等继承属性会失效，编辑器里富文本渲染、代码高亮等子组件根本拿不到值。只有 :root 是全局作用域起点，所有后代元素都能通过 var(--primary) 访问。

实操建议：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 把所有主题色统一定义在 :root 里，比如 --text-primary、--bg-editor、--border-input
• 不同主题用 class 切换，例如 ，再配合 .theme-dark :root 覆盖变量值
• 避免用 style 属性动态写变量——它优先级高但无法被 CSS 选择器继承，编辑器内部自定义样式容易冲突

contenteditable 元素的 color 和 background 必须显式继承

CSS 变量本身不触发重绘，但 contenteditable 区域默认不继承 color 和 background，切主题后文字可能还是黑底白字，或光标颜色错乱。

实操建议：

• 给编辑器根容器（如 <div contenteditable="true">）加上 <code>color: var(--text-primary); background: var(--bg-editor);
• 光标颜色靠 caret-color: var(--text-primary); 单独控制，别指望它自动随 color 变
• 如果用了第三方编辑器（如 Quill、Tiptap），检查其内置 class 是否硬编码了颜色；得用 !important 覆盖，或改用 data-theme 属性 + 更高权重选择器

切换主题时要避免 DOM 重排和样式抖动

直接批量改 :root 变量会触发全页面重绘，编辑器正在输入时卡顿明显，尤其在 Safari 上。

实操建议：

• 用 document.documentElement.className 切换主题 class，而不是逐个 setProperty —— 浏览器能合并样式计算
• 给编辑器容器加 transition: background 0.2s, color 0.2s;，但避开 border、box-shadow 这类重绘开销大的属性
• 深色/浅色模式切换时，提前用 @media (prefers-color-scheme: dark) 做兜底，减少 JS 主动干预频率

编辑器内嵌代码块、表格、图片等组件需单独适配

主题变量只管顶层样式，<pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 里的语法高亮、&lt;code&gt;&lt;table&gt; 的边框、&lt;code&gt;&lt;img&gt;&lt;/code&gt; 的外边框，往往用固定色值写死，切主题后完全不变。 &lt;p&gt;实操建议：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;把代码块背景、行号色、关键字色都改成 &lt;code&gt;var(--code-bg)&lt;/code&gt;、&lt;code&gt;var(--code-number)&lt;/code&gt; 等，别用 &lt;code&gt;#2d2d2d&lt;/code&gt; 这类硬编码&lt;/li&gt; &lt;li&gt;表格 &lt;code&gt;border-collapse: collapse&lt;/code&gt; 后的细线边框，用 &lt;code&gt;border: 1px solid var(--border-table)&lt;/code&gt; 替代 &lt;code&gt;border: 1px solid #e0e0e0&lt;/code&gt; &lt;/li&gt; &lt;li&gt;图片占位符、加载失败 fallback 图标，用 &lt;code&gt;filter: invert(1) brightness(1.2)&lt;/code&gt; 配合主题 class 控制明暗，比换图更轻量&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;真正难的不是设变量，是把编辑器所有视觉路径都收归到变量体系里——哪怕一个 &lt;code&gt;::placeholder&lt;/code&gt; 里漏掉 &lt;code&gt;color: var(--text-placeholder)&lt;/code&gt;，用户都会觉得“这个主题没切干净”。&lt;/p&gt; &lt;/table&gt;&lt;/code&gt;</pre>