CSS变量实现主题切换的方法

下面我将详细讲解CSS变量实现主题切换的方法的完整攻略。

什么是CSS变量？

CSS变量也称为自定义属性，是一种定义在CSS规则中的、可重复使用的值。与常规的CSS属性不同，CSS变量以双减号（--）开头，并可以在整个样式表的范围内使用。

实现简介

利用CSS变量实现主题切换的方法主要包括以下几个步骤：

1. 定义多套主题色进行切换；
2. 使用CSS变量将主题色应用到页面中；
3. 编写JavaScript代码实现主题切换。

接下来，分别对以上步骤进行详细说明。

定义多套主题色

在CSS文件中定义多套主题色，如下所示：

/* 主题1: 蓝色 */
:root {
  --theme-color: #3399CC;
}

/* 主题2: 绿色 */
.theme2 {
  --theme-color: #66CC99;
}

/* 主题3: 紫色 */
.theme3 {
  --theme-color: #9966CC;
}

在上面的代码中，使用:root伪类定义默认主题色--theme-color，其余的两套主题色使用.theme2和.theme3类分别定义。

使用CSS变量将主题色应用到页面中

为了将主题色应用到页面中，我们可以使用var()函数来获取定义的CSS变量，如下所示：

header {
  background-color: var(--theme-color);
}

在上面的代码中，使用var()函数获取定义的主题色--theme-color并应用到header元素的背景颜色上。这样，在JavaScript改变CSS变量的值时，页面中的主题颜色也会随之改变。

编写JavaScript代码实现主题切换

最后，我们通过JavaScript代码实现主题切换。代码示例如下：

function changeTheme(theme) {
  document.documentElement.className = theme; // 将主题类添加到当前HTML元素上
}

使用上面的代码，在主题切换时只需通过执行changeTheme('theme2')或者changeTheme('theme3')等命令，然后在CSS中定义对应的主题样式即可。

另一种主题切换方法是通过checkbox元素的状态改变触发改变主题样式，如下所示：

<input type="checkbox" id="theme-switch">
<label for="theme-switch">切换主题</label>

const themeSwitch = document.querySelector('#theme-switch');
themeSwitch.addEventListener('change', (e) => {
  if (e.target.checked) {
    document.documentElement.classList.add('theme2');
  } else {
    document.documentElement.classList.remove('theme2');
  }
});

在上面的代码中，我们通过监听change事件判断checkbox状态，然后通过classList添加或者删除theme2样式类达到改变主题的效果。

总结

通过定义多套主题色并将其应用到页面中，并在JavaScript中进行主题切换，我们就可以轻松地实现网站的主题切换功能。同时，还可以通过更加灵活的控制，如使用checkbox元素的状态来进行主题切换。