data-theme必须设在document.documentElement上，否则fixed元素、伪元素、SVG填色等无法响应；正确写法为document.documentElement.dataset.theme='dark'，需在内联脚本中同步localStorage与系统偏好，并设置。
data-theme 必须设在 document.documentElement 上
改 body 或 wrapper 元素的 class 或 data-theme 属性，表面看样式变了，但 fixed 定位弹窗、::before/::after 伪元素、SVG 的 fill 都不会响应——因为 CSS 变量作用域绑定的是 :root，而 :root 永远指向 document.documentElement（即 标签）。
常见错误：document.body.setAttribute('data-theme', 'dark')，检查 DOM 会发现 根节点上压根没这个属性，html[data-theme="dark"] 选择器根本没匹配上。
正确做法只有一条：document.documentElement.dataset.theme = 'dark' 或 document.documentElement.setAttribute('data-theme', 'dark')。
模板里怎么安全注入初始主题值
服务端渲染或静态 HTML 模板中，不能等 JS 加载完再设 data-theme，否则首屏必闪（FOUC）。必须把判断逻辑塞进 的内联脚本里，且位置要早于所有 <link rel="stylesheet">。
关键三步：
- 先查
localStorage.getItem('theme')，有就用 - 没就 fallback 到
window.matchMedia('(prefers-color-scheme: dark)').matches - 同步设置
<meta name="color-scheme">，否则 Safari 地址栏、表单控件不跟着变
if ('localStorage' in window) {<br> const saved = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');<br> document.documentElement.setAttribute('data-theme', saved);<br> document.querySelector('meta[name="color-scheme"]').setAttribute('content', saved);<br>}
CSS 中必须用 html[data-theme="dark"] 而非 .dark
用 .dark 类名切换主题，极易和 Tailwind 的 dark: 前缀、Ant Design 的主题机制、BEM 命名冲突，而且无法保证伪元素、fixed 元素、Shadow DOM 内组件生效。html[data-theme="dark"] 是唯一权重足够、语义清晰、浏览器优化充分的选择。
注意两点：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 漏掉
html前缀（比如只写[data-theme="dark"]）会导致变量作用域被压缩到局部，子元素可能覆盖它 - 所有用到变量的地方必须显式调用
var(--bg, #fff)，逗号后的回退值不能省，否则变量未定义时直接回退到浏览器默认色（比如深色模式下边框变黑）
HTML5UP 等响应式模板改背景色常失效的原因
HTML5UP 模板通常用多层容器（如 #page-wrapper、.wrapper、#main）承载内容，真正决定可见背景的往往不是 body，而是最外层容器。
单纯改 body { background-color } 无效是常态。
可靠做法：
- 优先统一修改 CSS 变量，比如在
:root里设--color-bg: #1a1a1a;，再让所有容器用background-color: var(--color-bg); - 若需快速验证，直接加组合选择器：
body, :root, #page-wrapper, .wrapper { background-color: #1a1a1a !important; }——!important在这里合理，用来对抗模板里高特异性规则 - 别忘了检查 JS 是否动态加类（如
body.is-loading），对应状态下的背景色也要覆盖
立即学习“前端免费学习笔记（深入）”；
CSS 变量命名和使用必须贯穿全部样式规则，漏一个var() 调用，那个地方就永远切不动主题。 
