最轻量可控的换肤方案需三同步：localStorage只存纯值、页面加载时立即应用CSS变量、切换主题时同步更新dataset和localStorage。关键在变量命名统一、读写时机卡在渲染前、三处严格一致，否则导致闪屏或失效。
能配合，而且是目前最轻量、最可控的换肤方案。关键不在“能不能”，而在 localStorage 存什么、什么时候读、怎么写进 CSS 变量——三处错一点，就会闪屏、失效或只局部变色。
localStorage 里只存原始值，别存 CSS 规则
常见错误是把整个 :root { --color: red; } 字符串塞进 localStorage，下次读出来直接 innerHTML 插入 <style>。这会导致样式表重复注入、变量覆盖混乱、DevTools 难调试。
- 正确做法：只存纯值，比如
localStorage.setItem('theme-primary', '#4a90e2') - 变量名用统一前缀（如
theme-），避免和第三方库冲突 - 所有值都是字符串，
JSON.stringify不必要，localStorage本来就不支持非字符串类型 - 首次无存储时，必须提供默认 fallback，否则
var(--primary)解析失败会回退到浏览器默认色
页面加载时立刻应用，别等 DOMContentLoaded
如果等到 DOMContentLoaded 才读取 localStorage 并设置变量，用户会看到白底黑字一闪，再变成深色——这就是 FOUC（Flash of Unstyled Content）。
- 最佳时机是在
<head>里放一段内联<script>，在 HTML 解析阶段就执行 - 先读
localStorage.getItem('theme-primary')，没值就 fallback 到window.matchMedia('(prefers-color-scheme: dark)').matches - 然后立即调用
document.documentElement.style.setProperty('--primary-color', value)，确保渲染前变量已就位 - 不要用
document.getElementById('dynamic-theme').textContent = ...动态生成<style>，那比内联 script 慢一个渲染周期
切换主题时同步更新 dataset 和 localStorage
只改 style.setProperty 是临时的；只改 localStorage 是持久的但不生效；只改 dataset.theme 是语义的但没变量值——三者必须同时动。
立即学习“前端免费学习笔记（深入）”；
- 切换函数里第一行：
document.documentElement.dataset.theme = 'dark' - 第二行：
localStorage.setItem('theme', 'dark') - 第三行：批量调用
style.setProperty更新所有相关变量，比如--bg-color、--text-color - 注意 Safari 对
dataset大小写敏感：data-theme="dark"对应dataset.theme，不是dataset.Theme - 不要用
document.body.className = 'dark'，它和:root[data-theme="dark"]规则不匹配，CSS 层叠不会触发
CSS 变量必须声明在 :root，且带 -- 前缀
漏写 :root 或写成 html、body，变量作用域就缩窄了，子元素继承不到，换肤看起来“断层”。
-
:root { --primary-color: #007bff; }是唯一能保证全局继承的写法 - 变量名必须以
--开头，var(--primary-color)才能识别 - 不要在组件类里重复声明，比如
.card { --bg: #fff; }—— 这只会让.card内部生效，其他地方还是旧值 - 伪元素（
::before）、disabled 状态、contenteditable区域都依赖继承链，只有:root能兜住
真正麻烦的不是写几行 JS，而是变量命名是否一致、读写时机是否卡在渲染前、dataset 和 localStorage 是否严格同步——这三个点一松，换肤就变成“看起来能动，实际总差一口气”。
