css颜色可通过自定义属性（–变量名）定义，使用var()调用，支持动态修改与主题切换，如:root中定义–primary-color，在.button中应用var(–primary-color)，结合data-theme实现深色/浅色模式，提升维护效率。
CSS颜色当然可以使用变量来定义，这通过CSS自定义属性（Custom Properties）实现。它们也常被称为“CSS变量”，能极大提升配色管理的灵活性和维护效率。
什么是CSS自定义属性
CSS自定义属性是用户定义的值，可以在整个样式表中重复使用。它们以两个连字符开头（–），比如 –primary-color。这些变量可以在任意css选择器中定义，并通过 var() 函数调用。
与预处理器（如sass）中的变量不同，CSS自定义属性是原生CSS的一部分，支持动态修改，可在运行时通过javaScript操作。
如何定义和使用颜色变量
通常在根选择器（:root）中定义全局颜色变量，这样可以在整个文档中访问：
立即学习“前端免费学习笔记（深入）”；
:root {
–primary-color: #007bff;
–secondary-color: #6c757d;
–success-color: #28a745;
–Error-color: #dc3545;
}
然后在样式规则中使用这些变量：
.button {
background-color: var(–primary-color);
color: white;
border: none;
}
如果需要设置默认值，可以在 var() 中指定：
color: var(–text-color, #333);
动态切换主题的实用场景
利用CSS变量，可以轻松实现深色/浅色主题切换。通过javascript修改变量值，界面颜色会自动更新。
例如定义两套颜色方案：
:root[data-theme=”light”] {
–bg: #ffffff;
–text: #000000;
}
:root[data-theme=”dark”] {
–bg: #1a1a1a;
–text: #ffffff;
}
然后在 body 或 :root 上切换 data-theme 属性：
document.documentElement.setAttribute(‘data-theme’, ‘dark’);
页面中所有使用这些变量的元素会立即响应变化，无需重写样式。
注意事项和兼容性
CSS自定义属性不被IE浏览器支持，但在现代浏览器中兼容性良好。使用前可检查项目是否需要支持老旧浏览器。
建议采用语义化命名，比如 –color-primary 而不是 –blue-500，这样更利于主题扩展和团队协作。
变量可以嵌套使用，但需注意作用域。子元素会继承父元素定义的变量，也可重新定义局部变量覆盖。
基本上就这些。合理使用CSS颜色变量，能让样式系统更清晰、易维护，特别适合中大型项目或需要主题定制的产品。