什么是CSS变量？
CSS变量是CSS的一个功能，允许你定义一个值并在整个文档中重复使用它。这些变量可以在任何CSS属性中使用，并且当变量值改变时，所有使用该变量的属性都会自动更新。
如何使用CSS变量实现主题切换？
1. 定义CSS变量
首先，我们需要定义一组CSS变量，这些变量将保存我们主题的颜色、字体大小和其他样式属性。这些变量通常在:root伪类中定义，这样它们就可以在整个文档中全局访问。
--primary-color: #5b6be8;
--secondary-color: #ffffff;
--background-color: #f4f4f4;
--text-color: #333333;
}
2. 应用CSS变量
接下来，我们将这些变量应用到我们的元素上。例如，我们可以将--primary-color变量用作按钮的背景色，--text-color用于文本颜色。
button {
background-color: var(--primary-color);
color: var(--text-color);
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
3. 切换主题
为了切换主题，我们可以简单地更改这些变量的值。这通常通过JavaScript来完成，当用户触发一个切换主题的动作时（例如点击一个按钮），我们可以更改:root伪类中变量的值。
document.documentElement.style.setProperty('--primary-color', '#4a4a4a');
当我们更改变量的值时，所有使用这些变量的元素的样式都会自动更新，从而实现了主题的切换。
4. 存储用户偏好
为了保持用户的主题选择，我们可以使用本地存储（localStorage）来保存用户的偏好设置。当用户下次访问网站时，我们可以从本地存储中读取这些设置，并应用到网站上，从而为用户提供一个持续一致的体验。
结论
使用CSS变量实现主题切换是一种简单而强大的方法，它不仅可以提高网站的用户体验，还可以让前端开发者更容易地维护和更新主题。这种方法不需要复杂的逻辑或重载页面，同时保持了样式的一致性和灵活性。通过掌握CSS变量，你可以轻松地为你的用户提供个性化和动态的主题选项。
