直接改 :root 颜色变量失效，是因为 CSS 变量存在作用域和层叠顺序：后声明覆盖前声明，组件级样式会局部覆盖全局变量；应统一在 :root 顶部声明且不重复定义，避免硬编码重写，并检查构建工具插入顺序。
为什么直接改 :root 里的颜色变量会失效？
不是变量没生效，而是 CSS 变量作用域和层叠顺序被忽略了。浏览器按声明顺序解析 :root，后面同名变量会覆盖前面的；更重要的是，如果组件级样式（比如 .card { --primary: red; }）在全局变量之后加载，它就会局部覆盖主题色——你改了 :root 却发现按钮还是旧颜色，大概率是这个原因。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有主题变量统一在
:root最顶部声明，且只声明一次，不重复定义 - 避免在组件内部用
--color-primary: blue这种硬编码重写，改用color: var(--color-primary);保持引用关系 - 检查构建工具是否把第三方 UI 库的 CSS 插入到了你的主题文件之前（比如 Tailwind 的
@layer base默认在最前，可能压掉你的:root）
如何让深色/浅色主题切换不闪屏？
闪屏本质是样式重绘延迟：JS 切换 document.documentElement.classList 后，浏览器要等 CSSOM 重建、重排、重绘，中间几十毫秒会显示默认样式。关键不是“怎么切”，而是“什么时候让浏览器知道该用哪套值”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
标签上预设初始主题类，比如服务端渲染时输出，而不是靠 JS 运行后才加 - 把主题变量定义拆成两份：一份在
:root（基础 fallback），一份在.theme-dark :root和.theme-light :root（覆盖规则），这样类一加上，变量立即生效 - 禁用 JS 切换时的过渡动画：
transition: none !important;加在html或:root上，避免颜色渐变干扰
var(--color-bg, #fff) 的第二个参数到底什么时候起作用？
它只在变量未定义或值为 unset 时兜底，不是 “找不到就用默认值”。常见误区是以为写成 var(--color-bg, #f0f0f0) 就能防错，结果发现主题切换后背景还是白的——因为 --color-bg 其实已定义，只是值为空字符串或 initial，这时 fallback 不触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 变量必须显式声明，哪怕只是
--color-bg: #fff;，不能依赖 fallback 当默认值 - 调试时用
getComputedStyle(document.documentElement).getPropertyValue('--color-bg')看真实值，确认不是空字符串或inherit - 需要条件 fallback？用
@supports (color: oklch(0% 0 0))这类特性检测，而不是依赖 var 的 fallback 参数
Webpack/Vite 项目里 CSS 变量怎么和 JS 主题逻辑同步？
JS 读取 getComputedStyle 没问题，但写入时容易漏掉动态更新场景：比如用户在设置页改了主色调，JS 改了 document.documentElement.style.setProperty('--color-primary', '#3b82f6')，但后续新挂载的组件如果用了 CSS-in-JS 库（如 Emotion），它可能缓存了旧的 CSSOM，导致颜色没刷新。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要直接操作
style.setProperty改单个变量，而是切换整个主题类：document.documentElement.className = 'theme-dark'，靠 CSS 规则批量更新 - 如果必须 JS 写变量（比如实时调色器），确保每次修改后触发一次强制重绘：
getComputedStyle(document.documentElement).color（读一个无关属性即可） - Vite 用户注意：HMR 时 CSS 文件重载可能重置
:root，把主题变量抽到单独的theme.css并@import在入口 CSS 顶部，避免被 HMR 刷新冲掉
真正难的不是定义变量，而是让变量在构建、运行、热更新、SSR、CSS-in-JS 多种上下文中始终指向同一个语义值。一个 --color-error 在按钮、表单、Toast 里表现一致，背后要卡住加载顺序、作用域隔离、服务端与客户端一致性三道关。
