部分颜色未更新是因为未在对应样式中显式使用var(--x)引用变量，或被硬编码、内联样式、第三方库规则覆盖；需重点检查background、border-color、box-shadow、伪元素、SVG、表单状态及UI库内部样式是否遗漏var()调用。
部分颜色没更新，不是变量没改成功，而是那些地方根本没用到 CSS 变量——或者用了，但被更高优先级的硬编码、内联样式、第三方库规则覆盖了。
哪些地方容易漏掉 var() 引用
CSS 变量不会自动扫描已有样式，你得手动把每个显式颜色值替换成 var(--x)。最容易遗漏的有这几类：
-
background、border-color、box-shadow、outline-color这些属性里写的#1890ff或rgb(24, 144, 255) -
::before和::after伪元素里的color或background（尤其是图标类装饰） - SVG 元素的
fill和stroke属性，必须显式写成fill: var(--icon-color) - 表单控件状态：比如
input:focus的outline-color、button:active的background-color - 第三方 UI 库组件内部样式（如 Ant Design 的
.ant-btn-primary），若其未启用 CSS 变量支持，就不会响应你的--primary-color
为什么 computed 样式里还是 var(--x) 而不是具体值
这说明变量未定义或拼写错误，浏览器静默 fallback 到继承值或初始值，不报错也不警告。
- 检查
:root是否真的声明了该变量，且名字完全一致（--primary-color≠--primaryColor≠primary-color） - 在 DevTools 的 Elements 面板中点击
<html>，在 Styles 侧栏确认变量是否出现在:root声明块中 - 如果变量是在
[data-theme="dark"] :root里定义的，确保document.documentElement.dataset.theme已设为"dark"，否则那条规则压根不生效 - 避免在组件 scoped style 或 Shadow DOM 内重复声明同名变量，否则会局部覆盖全局值
JS 修改后页面颜色仍卡住的常见原因
调了 document.documentElement.style.setProperty('--color', '#52c418') 却没变，问题往往不在 JS 本身：
立即学习“前端免费学习笔记（深入）”；
- 改的是
document.body.style或某个元素的style，而不是document.documentElement.style—— 全局变量必须操作html元素 - 变量值漏了单位，比如
setProperty('--size', 16)→ 应为'16px'；setProperty('--hue', '240')但:root里根本没声明--hue，导致所有var(--hue)fallback 失效 - 第三方库（如 Modal、Message）脱离 React context 渲染，即使你在
ConfigProvider里设了主题，它们也读不到新变量，需显式传contextHolder - 构建工具（如 Vite HMR）未触发全局变量重计算，可临时保存一次
variables.css文件强制刷新
回退值（fallback）为什么没起作用
var(--x, #fff) 的第二个参数只在变量**未定义**或值为 unset 时生效。它不是“找不到就用”，而是“根本不存在才兜底”。
- 如果
--x已声明但值为空字符串（--x: ;）或initial，fallback 不会触发 - 嵌套 fallback 如
var(--x, var(--y, #000))在旧版 Safari 中不支持，整条声明会被丢弃 - 深色模式下若只在
@media (prefers-color-scheme: dark)里声明变量，浅色模式时--x就是未定义的，此时 fallback 才真正生效 —— 所以务必在普通:root中先声明默认值
最常被忽略的一点：变量名对大小写和双短横线极其敏感，拼错一个字符，浏览器就当它不存在；而这种错误既不报错，也不警告，只默默 fallback 到透明或继承色 —— 检查时别只看 JS 逻辑，直接去 DevTools 的 Computed 面板看最终解析结果更可靠。
