如何在CSS中使用CSS变量控制颜色_自定义属性与主题切换

P粉602998670 2025-11-22 00:00:00 次阅读

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');
});