直接用document.documentelement.style.setproperty()修改:root变量可无刷新切换主题，但需确保变量已在:root中声明、js在dom就绪后执行、每个var()都设回退值，否则因变量未定义导致样式失效或fouc。
直接用 document.documentElement.style.setProperty() 改 :root 上的变量，配合 data-theme 属性控制作用域，就能无刷新切换——前提是变量必须提前在 :root 中声明，且 JS 执行时机早于首次样式计算。
为什么 setProperty 后颜色没变
最常见原因是变量压根没在 :root 里定义。浏览器遇到未声明的 var(--bg-primary) 会直接 fallback 到继承值或 transparent，不是“不变”，而是“失效”。
另一个高发场景是：你在 .theme-dark 类里声明变量，却试图从 body 或组件内读取——变量作用域没继承过去，自然读不到。
- 所有主题变量（哪怕浅色模式下值相同）都得显式写在
:root块里，例如：:root { --bg-primary: #fff; --text-primary: #222; } - 深色模式覆盖必须用
[data-theme="dark"] :root，别用.dark :root——前者权重稳定（110），后者易被业务 class 覆盖 - JS 修改前，确保 DOM 已就绪；
DOMContentLoaded事件里执行比window.onload更稳妥，避免 FOUC
data-theme 和 prefers-color-scheme 怎么共存
@media (prefers-color-scheme: dark) 是纯 CSS 行为，加载即生效；data-theme 是 JS 主动控制的状态。两者不冲突，但优先级必须明确：用户手动选择 > 系统偏好。
- 默认只在
:root定义浅色变量；@media里只重设变量值，不写完整样式块 - JS 初始化时先读
localStorage，有值就设document.documentElement.dataset.theme；没值再查matchMedia('(prefers-color-scheme: dark)').matches做 fallback - 监听系统变化：
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)，但仅当用户没手动切过主题时才响应
切换时页面闪白或文字消失
这是变量回退值缺失 + JS 执行延迟导致的典型 FOUC（Flash of Unstyled Content）。浏览器先按未定义变量渲染，JS 后改，中间出现空白期。
- 在 HTML 的
里放内联 script，预设初始状态：<script>document.documentElement.dataset.theme = localStorage.getItem('ui-theme') || 'light';</script> - 每个
var()都带回退值：color: var(--text-primary, #222);，防止变量未定义时彻底失色 - 批量修改变量时，别连写十次
setProperty()；改用cssText或封装函数一次注入，减少重排次数
真正难的不是“怎么切”，而是“怎么让第一次渲染就对”。变量声明位置、回退值、JS 注入时机这三点漏掉任意一个，都会在暗色模式下暴露出来——尤其是 Safari 和旧版 Chrome，对未声明变量的处理更激进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
