CSS变量通过:root声明--primary-color等自定义属性实现全局可配置主色，修改一处自动更新所有引用；需确保定义正确、拼写一致、加载顺序合理，并用class切换主题以安全覆盖变量。
为什么用 --primary-color 而不是直接写 #3498db
硬编码颜色值会导致改一处主色要全局搜索替换，漏掉某个 background-color 或 border-color 就破坏品牌一致性。CSS 变量（:root 定义的自定义属性）让颜色真正“可配置”——改一个地方，所有引用它的地方自动更新，且支持 JS 动态修改。
怎么在 :root 里声明并使用主色变量
把品牌主色定义在 :root 是最稳妥的做法，确保全局可访问。注意变量名用两个短横线开头，值必须是合法 CSS 值（比如带 # 的 hex）：
:root {
--primary-color: #3498db;
--primary-hover: #2980b9;
--primary-disabled: #bdc3c7;
}
然后在任意选择器中用 var() 引入：
.btn {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn:hover {
background-color: var(--primary-hover);
}
.btn:disabled {
background-color: var(--primary-disabled);
}
遇到 var(--primary-color) is not defined 错误怎么办
这个错误不会在浏览器控制台直接报出，但你会看到样式回退为初始值（比如背景变透明）。常见原因有：
立即学习“前端免费学习笔记（深入）”；
-
:root没有定义该变量，或拼写不一致（--primary-colour和--primary-color是两个变量） - 变量定义在某个局部作用域（比如
.theme-dark里），而你在外部选择器中调用 - CSS 文件加载顺序错乱：用了变量的样式表比定义变量的样式表先加载
- 变量值为空或语法错误（比如漏了
#，写成3498db）
主题切换时怎么安全覆盖主色变量
不要用多个 :root 块覆盖，而是用 class 切换上下文：
:root {
--primary-color: #3498db;
}
.theme-dark {
--primary-color: #2c3e50;
}
.theme-high-contrast {
--primary-color: #e74c3c;
}
然后 JS 控制 document.documentElement.classList.toggle('theme-dark')。关键点是：var(--primary-color) 总是取当前元素匹配到的最近有效声明，所以无需重写所有样式规则。
复杂点在于深色模式下，不能只改主色——文字对比度、边框灰阶、阴影强度都得同步调整，否则 var(--primary-color) 单独换色反而导致可访问性下降。
