css变量深色模式需在:root定义默认值、用document.documentelement切换class、避免style.setproperty覆盖，并在dom构建前初始化。
CSS变量在深色模式切换时不能“立即生效”，除非你确保变量定义位置、作用域和初始化时机全部正确——90%的延迟或失效都源于:root未声明默认值、document.documentElement操作过晚，或误用style.setProperty()覆盖了整套机制。
必须把所有变量定义在 :root 里
CSS变量靠继承传播，而只有:root（即元素）能保证任意节点（包括<input>、<button></button>、伪元素、Shadow DOM 内部）都能读取到。写在.dark、body或组件类里，变量只在该选择器匹配的子树中有效：
-
:root { --bg-primary: #ffffff; --text-primary: #333333; }→ 全局可读 -
.dark { --bg-primary: #121212; }→ 只对.dark自身及其后代生效，兄弟节点和原生控件拿不到 - 漏掉
:root默认声明，var(--bg-primary)在浅色模式下会 fallback 到浏览器默认（比如白底黑字崩成黑底黑字）
切换 class 必须操作 document.documentElement
JS 切换主题的本质是触发浏览器重新计算 CSS 变量值，这依赖于 class 匹配规则是否命中:root。错误做法是改body.classList或自定义容器元素：
- ✅ 正确：
document.documentElement.classList.toggle('dark')，配合:root.dark { --bg-primary: #121212; } - ❌ 错误：
document.body.classList.toggle('dark')，.dark选择器无法影响:root变量 - 别用
document.documentElement.style.setProperty('--bg-primary', '#121212')——它会覆盖媒体查询和.dark的所有声明，导致系统偏好失效
初始化必须在 DOM 构建前完成
页面闪屏（白底→黑底）几乎全是初始化时机错误造成的。浏览器首次渲染时若:root还没挂上dark类，就按默认值画一遍，再重绘一次：
- 在
里放内联<script></script>，不要等DOMContentLoaded - 先读
localStorage.getItem('theme')，再立刻设置document.documentElement.classList - 同时检查系统偏好：
if (window.matchMedia('(prefers-color-scheme: dark)').matches)，但以 localStorage 为准（用户主动选择优先级更高） - 漏掉任一环，
<input>边框、<select></select>背景、SVG 图标颜色都会卡在旧主题
所有 var() 必须带 fallback 且命名防冲突
看似安全的color: var(--text-primary, #333)，一旦变量名拼错（比如--text-prmiary），就会直接回退到 fallback，样式错乱却难以定位：
- 统一加语义前缀：
--theme-bg-primary、--theme-border-strong，避免和 Tailwind 的--tw-或未来原生属性冲突 - fallback 值不能只是占位，要选一个可用的备选色（比如深色 fallback 用
#1e1e1e，不是透明） - 第三方组件（如 Vant、NutUI）需提高选择器优先级：
html[data-theme="dark"] .nut-button，而不是简单覆盖.nut-button
最易被忽略的是：变量值本身不响应属性变化，data-theme或class切换后，浏览器靠重匹配样式规则来刷新计算结果——这意味着任何一步断链（:root没定义、class 名不一致、JS 执行太晚），变量就不会“动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
