直接改 :root 里的变量不生效，是因为框架 CSS 加载顺序优先或动态注入晚于渲染，变量需在所有框架样式后加载且命名严格统一，否则被覆盖或未就绪。
为什么直接改 :root 里的变量值不生效？
不是变量没改，而是改的位置不对。浏览器只认 :root 里被 CSS 规则实际“命中”的那组变量——如果框架（比如 Tailwind 或 Bootstrap）的 CSS 文件在你自定义样式之前加载，它的 :root 声明就已覆盖你的；反之，如果你的 CSS 被打包进 JS 动态注入，又可能晚于首屏渲染，导致闪屏或失效。
关键点在于：CSS 变量的生效依赖「选择器匹配顺序 + 加载时机」，不是写在哪就从哪起效。
- 确保你的主题覆盖规则在所有框架 CSS 之后加载（
<link>标签排在最后，或用@import显式控制顺序） - 避免用
!important修饰变量赋值（--color-primary: #007bff !important整行会被忽略） - 变量名必须完全一致：Bootstrap 5.3 用
--bs-primary，Tailwind 默认不用变量名，得自己配--tw-primary类似前缀
data-theme 切换时页面闪动的根本原因
闪动不是 JS 慢，是 CSS 解析和 DOM 渲染之间的时间差。JS 执行 document.documentElement.setAttribute('data-theme', 'blue') 时，若对应主题的 CSS 还没解析完，浏览器会先按旧变量渲染一帧，再重绘。
缓解方法只有两个，且必须同时做：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>内联一组最小化默认变量：<style>:root { --color-bg: #fff; --color-text: #1f2937; }</style> - 首次加载时，用
document.documentElement.style.setProperty()同步初始化变量（例如读取localStorage后立刻设值），绕过 CSS 文件加载延迟
别指望加 transition 或 opacity 动画掩盖——变量未就绪，动画只是在播一个错误状态。
第三方组件（如 Element Plus、Ant Design）不响应主题怎么办？
它们内部大多没用 var(--xxx)，而是硬编码颜色或依赖自己的主题机制。强行覆盖几乎无效，除非满足以下任一条件：
- 组件库明确支持 CSS 变量（查文档看是否列出
--el-color-primary这类变量） - 你使用的是其「CSS-in-JS」或「主题构建」版本（如 Ant Design 的
theme配置项 +generate工具） - 你在构建阶段就用 Sass/Less 重写了它的变量（例如
$primary-color: var(--brand-primary)），并确保编译后输出的 CSS 里真用了var()
最现实的做法：对非变量友好型组件，单独写一层覆盖样式，用 [data-theme="blue"] .el-button 这类高权重选择器强制重置，但要小心破坏其状态逻辑（比如 .el-button:disabled 的颜色）。
多品牌主题命名混乱导致切换“部分生效”
一个项目里混用 --primary、--color-primary、--theme-primary，结果按钮用了 A，图标用了 B，切换时颜色分裂——这是最常被忽略的维护陷阱。
统一收口比写十个切换函数更重要：
- 所有主题变量必须集中声明在
@layer base或单独的theme.css中，禁止散落在组件样式里 - 命名严格分层：
--brand-primary（品牌主色）、--state-success（状态色）、--type-heading（语义色），不带业务上下文 - 用预处理器（Sass）管理主题 map，生成
[data-theme="brand-a"] :root块，避免手写重复规则
复杂点不在切换动作本身，而在变量是否真的被所有路径消费到——从内联样式、伪元素、SVG 属性，到第三方组件的 shadow DOM 边界，都得提前验证。
