直接修改 :root 中的 --primary-color 可全局换色，但需确保所有颜色均显式使用 var(--primary-color)、变量作用域正确、无拼写错误、无非法 !important、fallback 完备，且伪元素、svg、表单、第三方库等场景均已适配。
直接改 :root 里的 --primary-color 就能全局换色，但前提是所有颜色都已用 var(--primary-color) 显式声明，且变量定义位置、作用域、fallback 都正确——漏一处，那一块就卡死在旧颜色上。
为什么改了 :root 变量页面却没变？
根本原因不是 JS 没执行，而是 CSS 变量根本没生效或没被读取：
-
:root声明被写在某个组件选择器里（比如.header { --primary-color: red; }），变量只在该局部作用域内有效 - 你的样式文件加载顺序靠前，被后加载的框架 CSS（如 Bootstrap、Tailwind）覆盖，而它们的变量名是
--bs-primary或--tw-bg-opacity，不匹配 - 变量名拼错，比如
--primay-color少了个r，浏览器遇到未定义变量又没 fallback，直接丢弃整条声明 - 用了
!important：浏览器会忽略带!important的自定义属性声明，--primary-color: #ef4444 !important是非法的
哪些地方最容易漏掉 var() 替换？
浏览器不会自动扫描旧样式。你必须手动检查并替换所有硬编码颜色值，尤其以下几类：
-
::before/::after伪元素中的background和color—— 下划线、图标装饰、状态标记常在这里“裸写” - 内联 SVG 的
fill和stroke属性：必须显式写成fill: var(--primary-color)，不能依赖继承 - 表单控件状态：比如
input:focus的outline-color、button:disabled的background-color - 第三方库（如 Ant Design、Element Plus）内部 class —— 它们默认不响应你的变量，需确认是否开启 CSS 变量主题支持，或加额外覆盖规则
JS 切换主题时，setProperty() 为什么无效？
调用 document.documentElement.style.setProperty('--primary-color', '#3b82f6') 看似合理，但实际常失效，因为：
- 你改的是
style属性上的内联变量，而 CSS 规则里可能写了更优先的[data-theme="dark"] :root { --primary-color: #1e293b; }，后者会覆盖前者 - 误用了
document.body.style.setProperty()——body不是变量作用域根，改了白改 - 没处理 SSR 场景：服务端渲染时
document不存在，必须加if (typeof document !== 'undefined')包裹 - 没同步更新配套变量：只改
--primary-color，但--primary-hover、--bg-color还是旧值，导致按钮蓝、背景白、文字黑，视觉割裂
如何确保 var() 调用真正安全？
每个 var() 都必须带 fallback，这不是可选项，而是防止样式崩塌的底线：
- 写成
color: var(--primary-color, #3b82f6)，而不是color: var(--primary-color) - fallback 不能是另一个变量：
var(--primary-color, var(--fallback))是非法语法 - 媒体查询中覆盖变量时，也要同步更新 fallback 值，否则响应式切换可能因 fallback 未变而显示异常
- 深色模式下，
var(--text-color, #1f2937)和var(--bg-color, #f9fafb)必须成对出现，且对比度满足 WCAG AA 标准
最易被忽略的点：CSS 变量本身不触发重排，但 cascade 层级极易误判——你以为改了 :root 就万事大吉，其实某处 .theme-dark .btn { color: blue; } 的硬编码规则正悄悄压过你的 var()。真要一键替换，得先让全站样式彻底“变量化”，再谈切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
