如何使用CSS变量简化主题切换？

代码问答

Q1: 我正在尝试为我的网页添加一个夜间模式，CSS变量如何帮助我实现这个功能？ ​

A1: CSS变量可以通过定义一组颜色值来简化主题切换。你只需要在:root中定义一组颜色，然后为夜间模式创建一个新的变量集合。例如：

 :root { --background-color: #fff; --text-color: #000; } :root.dark-mode { --background-color: #333; --text-color: #ccc; }

然后，通过JavaScript切换dark-mode类：

document.documentElement.classList.toggle('dark-mode');

Q2:​ 我如何知道何时应该使用CSS变量而不是直接在元素上设置样式？ ​

A2: 当你需要在多个地方使用相同的值时，使用CSS变量是一个很好的选择。它有助于保持一致性并简化未来的样式更改。

小提示: 考虑将CSS变量视为样式表中的“常量”，它们使得样式更加模块化。