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修改变量值，界面颜色会自动更新。
DouPHP模块化企业网站管理系统是一款轻量级企业网站管理系统，基于PHP+MYSQL架构的，包含“手机版”、“公众号管理模块”、“小程序”，可以使用它快速搭建一个企业网站。 DouPHP功能特色： （模块全部免费，一键安装） 功能性模块：防伪查询模块、投票模块、自定义表单模块、工单模块等、会员模块、订单模块、视频模块、下载模块、图片模块等； 企业官网模块：业务范围
例如定义两套颜色方案：
: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颜色变量，能让样式系统更清晰、易维护，特别适合中大型项目或需要主题定制的产品。
