用 HTML 属性（如 theme）控制皮肤必须配合 :root 选择器和 CSS 变量，仅改属性无效；需在 CSS 中明确定义 :root[theme="dark"] 等规则，并在 同步读取 localStorage 初始化，同时添加 color-scheme 保证原生控件适配。
直接用 html 元素的属性（比如 theme 或 data-theme）控制皮肤，是可行的，但必须配合 :root 选择器和 CSS 变量才能真正生效——单独改属性本身不触发样式变化。
为什么只改 html 属性没用？
CSS 不会自动响应 HTML 属性变更，除非你在 CSS 里显式写了对应的选择器规则。常见错误是：
- 只写
document.documentElement.setAttribute('theme', 'dark')，但 CSS 里没定义:root[theme="dark"] - 把变量写在全局（如
--color-bg: #000）而不是挂载到:root[theme="dark"]下，导致变量不被继承 - 用
data-theme却忘了在 CSS 里写:root[data-theme="dark"]，而浏览器只认属性选择器，不认data-前缀的语义
:root[theme="xxx"] 是最简可靠的绑定方式
这个模式把主题逻辑完全收口在 CSS 层，JS 只负责切属性，不用碰样式值。示例结构如下：
:root {
--color-bg: #fff;
--color-text: #333;
}
:root[theme="dark"] {
--color-bg: #1a1a1a;
--color-text: #eee;
}
:root[theme="blue"] {
--color-primary: #2563eb;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
}
切换时只需一行 JS：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.setAttribute('theme', 'dark');
注意：theme 是自定义属性名，不是标准属性，所以必须用 setAttribute，不能直接写 document.documentElement.theme = 'dark'（无效）。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
localStorage 同步必须在 DOM 构建前完成
如果等 DOMContentLoaded 再读取 localStorage.getItem('theme') 并设属性，用户会看到默认皮肤闪一下才变暗色。正确做法是：
- 把初始化脚本放在
里，不加defer或async - 同步执行：
const saved = localStorage.getItem('theme'); if (saved) document.documentElement.setAttribute('theme', saved); - 每次切换后立刻存：
localStorage.setItem('theme', 'dark')
漏掉“同步执行”这一步，90% 的闪屏问题都出在这儿。
别忽略 color-scheme 对原生控件的影响
即使你重写了所有按钮、输入框的样式，<input type="checkbox"> 或滚动条仍可能按系统偏好渲染。加这一句能强制对齐：
:root {
color-scheme: light dark;
}
它告诉浏览器：“当前主题支持亮/暗两种原生控件配色”，Chrome/Firefox/Safari 均已支持。不加的话，深色主题下 checkbox 的焦点框可能还是浅蓝，很突兀。
真正难的不是切换动作本身，而是确保 CSS 变量作用域正确、初始化时机卡准、原生控件不脱节——这三个点没对齐，换肤就会看起来“卡顿”或“不彻底”。
