CSS变量通过--定义、var()调用，可在:root中声明并配合JavaScript动态切换主题，如通过classList.toggle('dark-theme')实现深浅色模式转换，提升样式维护效率。
CSS变量（也称为自定义属性）是现代CSS中非常实用的功能，能帮助开发者更高效地管理颜色、字体、间距等样式值，尤其适合实现主题切换。通过定义变量，可以集中控制整个网站的视觉风格，提升维护效率。
定义与使用CSS变量
CSS变量以两个连字符（--）开头，可以在任意CSS选择器中定义，通常推荐在:root伪类中声明，以便全局访问。
例如，定义几个常用的颜色变量：
:root {
--primary-color: #007BFF;
--secondary-color: #6C757D;
--background-color: #FFFFFF;
--text-color: #212529;
}
在其他样式规则中，使用var()函数调用这些变量：
立即学习“前端免费学习笔记（深入）”；
.header {
background-color: var(--primary-color);
color: var(--text-color);
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
实现主题切换功能
借助CSS变量，可以轻松实现深色/浅色主题切换。方法是创建不同的变量集合，并通过类名控制应用哪一套样式。
比如，在:root中定义默认浅色主题，再为深色主题创建一个.dark-theme类：
:root {
--primary-color: #007BFF;
--background-color: #FFFFFF;
--text-color: #212529;
}
.dark-theme {
--primary-color: #0056b3;
--background-color: #121212;
--text-color: #FFFFFF;
}
body {
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
页面的元素可以通过JavaScript动态添加或移除.dark-theme类来切换主题。
通过JavaScript操作主题
只需几行JavaScript即可实现按钮点击切换主题：
const body = document.body;
const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', () => {
body.classList.toggle('dark-theme');
});
结合HTML中的按钮：
用户点击按钮时，页面会立即响应并切换颜色主题，所有使用变量的地方都会自动更新。
注意事项与兼容性
CSS变量不被旧版浏览器（如IE）支持，使用前需确认目标用户的浏览器环境。可通过@supports进行特性检测，并提供降级方案。
变量值的继承特性意味着子元素会继承父元素定义的变量，可用来实现局部主题定制。
避免在变量中存储复杂值（如带单位的组合值），尽量保持单一用途，提高可读性和复用性。
基本上就这些。合理使用CSS变量能让颜色管理更清晰，主题切换更简单，代码更易维护。
