直接用document.documentElement.style.setProperty()修改CSS变量即可实时更新样式，前提是变量已在:root中声明、JS在DOM就绪后执行、每个var()都带fallback值，否则因变量未定义而回退失效。
直接用 document.documentElement.style.setProperty() 修改变量就行
只要变量已在 :root 中声明，JS 就能实时更新样式，不用重载页面。但前提是：变量必须提前定义，JS 必须在 DOM 就绪后执行，且每个 var(--color, #000) 都得带回退值。
常见错误是改了变量但颜色没变——大概率是 var(--bg-primary) 根本没在 :root 里声明过，浏览器直接 fallback 到透明或继承色，不是“没生效”，而是“变量未定义导致失效”。
-
:root块里必须显式写出所有主题变量，哪怕浅色模式下值相同也要写全 - 深色模式覆盖要用
[data-theme="dark"] :root，别用.dark :root—— 后者权重低，容易被业务 class 覆盖 - JS 初始化建议放在
DOMContentLoaded里，比window.onload更早，避免 FOUC
data-theme 和 prefers-color-scheme 怎么共存
两者不冲突，但优先级必须明确：用户手动选择 > 系统偏好。默认只在 :root 定义浅色变量；@media (prefers-color-scheme: dark) 里只重设变量值，不写完整样式块。
初始化逻辑要分三步走：
立即学习“前端免费学习笔记（深入）”；
- 先读
localStorage.getItem('ui-theme')，有值就设document.documentElement.dataset.theme - 没值再查
matchMedia('(prefers-color-scheme: dark)').matches做 fallback - 监听系统变化：
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)，但仅当用户没手动切过主题时才响应
页面闪白或文字消失？那是 FOUC
典型原因是变量回退值缺失 + JS 执行延迟。浏览器先按未定义变量渲染，JS 后改，中间出现空白期。
解决办法很实在：
- 在 HTML 的
<head>里放内联 script 预设初始状态：<script>document.documentElement.dataset.theme = localStorage.getItem('ui-theme') || 'light';</script> - 每个
var()都必须带回退值，比如color: var(--text-primary, #222); - 批量修改变量时，别连写十次
setProperty()；改用cssText或封装函数一次注入，减少重排次数
React 组件里怎么安全读取和响应主题变量
CSS 变量本身不触发 React 更新，所以不能靠它驱动组件 rerender。真需要响应式行为（比如根据主题切换图标颜色），得用 useEffect 监听 data-theme 变化，或封装一个自定义 Hook 读取 getComputedStyle(document.documentElement)。
更稳妥的做法是把主题状态收归 Context 管理，变量只负责视觉层，逻辑层走 React state —— 这样既能利用 CSS 变量的高效，又不破坏 React 的数据流。
真正难的不是“怎么切”，而是确保每次切换都干净、可预测、无视觉抖动。变量声明位置、JS 执行时机、回退值完整性，这三点漏掉任何一环，都会在用户侧暴露出来。
