仅使用CSS实现无需JS的暗色模式
现在，越来越多的网站都开始提供暗色模式作为可选功能。这种模式可以减少眼睛疲劳，尤其是在观看白色背景页面的时候。但实际上，实现它并不需要使用JavaScript，CSS就可以做到。
在本文中，我们将会学习如何仅使用CSS实现无需JS的暗色模式。此方法不仅可以改变文本颜色和背景，还可以改变所有元素的外观样式，包括按钮、输入框等等。让我们一起看看吧！
首先，我们需要使用CSS变量来存储我们需要的颜色。最好是将它们存储在根元素中，以便我们可以在DOM中的任何地方访问它们。
“`css
:root {
–background-color: #fff;
–text-color: #333;
}
“`
在这里，我们定义了两个变量，一个是背景颜色，一个是文本颜色。我们可以将它们设置为适当的颜色，以便我们的网站可以看起来很美。
接下来，我们需要使用CSS伪类来检查是否启用了暗色模式。我们可以使用“prefers-color-scheme”媒体查询来实现这一点。
“`css
@media (prefers-color-scheme: dark) {
:root {
–background-color: #333;
–text-color: #fff;
}
}
“`
这样，我们就可以在用户启用暗黑模式时使用自定义颜色。如果我们希望在不使用暗黑模式时仍然使用默认颜色，可以将样式设置为以下内容。
“`css
@media (prefers-color-scheme: no-preference) {
:root {
–background-color: #fff;
–text-color: #333;
}
}
“`
接下来我们需要使用变量来设置CSS样式。我们可以使用var（）函数来检索定义的变量并使用它们进行样式设置。以下是一些示例代码，可为背景和文本颜色设置变量值：
“`css
body {
background-color: var(–background-color);
color: var(–text-color);
}
“`
最后，我们需要一个按钮，让用户可以手动切换暗黑模式。这一步很简单，我们可以使用一个复选框并使其与以下CSS样式相关联。
“`css
input[type=”checkbox”] {
position: absolute;
top: -9999px;
left: -9999px;
}
“`
这将隐藏复选框，但会使其在页面中可用。我们可以使用伪类选择器来设置复选框的背景。
“`css
label[for=”dark-mode-toggle”] {
background-color: #fff;
border-radius: 10px;
display: inline-block;
height: 40px;
width: 70px;
}
“`
这将使复选框显示为一个类似按钮的形状。我们还可以使用一些CSS变量来设置按钮的样式，以便与之前设置的主题一致。
“`css
label[for=”dark-mode-toggle”] {
background-color: var(–background-color);
color: var(–text-color);
}
“`
最后，我们只需要使用以下代码使标签和复选框相关联即可。
“`html
“`
这就是我们如何使用CSS来实现不需要JavaScript的暗色模式。这样，我们就可以实现一个更为简单、快速、高效的暗色模式功能。希望这篇文章对你有所帮助！
了解更多有趣的事情：https://blog.ds3783.com/