仅使用HTML和CSS的亮暗模式按钮切换
🌊 作者主页：海拥
🌊 简介：🏆CSDN全栈领域优质创作者、🥇HDZ核心组成员、🥈蝉联C站周榜前十
🌊 粉丝福利：粉丝群 每周送6~9本书，不定期送各种小礼品，往期获奖公布
建立仅html和css的亮暗模式切换的快速指南。文章末尾给出了完整代码
演示效果：
使用css，html我们将建立一个按钮，该按钮：
light-mode和dark-mode之间的变化- 默认为用户首选的配色方案
- 更改标签以反映用户的首选配色方案。
为什么没有JavaScript？
我的目标之一是使每个工具都可以不使用javascript，以一定程度上简化代码，同时也是个挑战。
我需要一种dark-mode 无需javascript进行切换的方法，同时仍然默认为visitor preferred-color-scheme。
这是我的解决方案，针对本教程进行了简化：
怎么运行的：
大多数dark-mode切换按钮的工作方式是更改<body>标签上的属性，然后在CSS中定位该属性。像这样：
<body class="dark-mode">
<!-- Site Content -->
</body>
<style>
body {
background:white
}
body.dark-mode {
background:black
}
</style>
<script>
function toggleDarkMode() {
// some logic to change the class on the body tag
}
</script>
这非常简单，但是需要javascript添加和删除dark-mode class。
幸运的是，我们仍然可以在没有样式的情况下对样式进行更改javascript。我们可以CSS用来定位非JavaScript用户互动。
在这里，我们将使用checkbox和:checked伪选择器：
<body>
<input id="color-mode" type="checkbox" name="color-mode">
<label for="color-mode">Dark Mode</label>
<!-- Site Content -->
</body>
我们需要确保输入是我们<body>中的第一件事，因此我们可以将CSS之后的所有内容作为目标。
body {
background:white
}
#dark-mode:checked ~ * {
background:black
}
但这是有问题的！
CSS中没有办法将元素的父对象作为目标。 因此，我们无法更改<body>的颜色。
因此，我们将使用变通方法。 我们将在完成<body>工作的复选框后放置<div>。 然后，设置<div>的样式以填充屏幕。
现在我们可以使用复选框输入来设置<div>的样式：
<body>
<input id="color-mode" type="checkbox" name="color-mode">
<label for="color-mode">Dark Mode</label>
<div class="color-scheme-wrapper">
<!-- Site Content -->
</div>
</body>
<style>
.color-scheme-wrapper {
min-height:100vh;
background:white;
color:black;
}
#color-mode:checked ~ .color-scheme-wrapper {
background:black;
color:white;
}
</style>
这行得通！ 但是，我们仍然需要修复一些问题：
- 我们需要将其默认设置为用户首选的配色方案。
- 我们应该使用css变量，因为它会使生活更轻松。
- 我们需要更改标签以反映用户的偏好。
首先让我们添加CSS variables。
CSS variables使我们可以定义根据复选框而变化的颜色。 我们将仅使用两种颜色，一种用于背景，另一种用于文本：
:root {
--bg:#F4F0EB;
--text:#141414;
}
#dark-mode:checked ~ .color-scheme-wrapper {
--bg:#333;
--text:#fff;
}
.color-scheme-wrapper {
background:var(--bg);
color:var(--text);
}
现在，当我们选中复选框时，变量将更改，并且这些更改将反映在或CSS的其余部分中。
默认为访客的首选配色方案。
现在让我们使其默认为用户的首选项。 为了定位用户的偏好，我们可以使用@media查询。
根据“ prefers-color-scheme”媒体查询的结果，我们将交换我们的亮模式和暗模式主题。
因此，如果用户的设备启用了暗模式，则它将从暗开始：
:root {
--bg:white;
--text:black;
}
@media (prefers-color-scheme: dark) {
:root {
--bg:black;
--text:white;
}
}
#color-mode:checked ~ .color-scheme-wrapper {
--bg:black;
--text:white;
}
@media (prefers-color-scheme: dark) {
#color-mode:checked ~ .color-scheme-wrapper {
--bg:white;
--text:black;
}
}
.color-scheme-wrapper {
min-height:100vh;
background:var(--bg);
color:var(--text);
}
根据用户偏好更改标签
现在我们已经交换了暗模式和亮模式，我们需要确保复选框的标签能够反映出这一点。
如果在屏幕为亮白色时标签上说暗模式处于打开状态，将会令人困惑。
也有一个快速解决方案。 首先，我们在<label>中添加两组文本，每个用户首选项一组：
<input id="color-mode" type="checkbox" name="color-mode">
<label for="color-mode">
<span class="dark-mode-hide">Dark Mode</span>
<span class="light-mode-hide">Light Mode</span>
</label>
然后，根据模式隐藏标签之一。
这组媒体查询可以让我们双方的目标light-mode，dark -mode以及浏览器不支持prefers-color-scheme：
.light-mode-hide {
display:none;
}
@media (prefers-color-scheme: dark) {
.dark-mode-hide {
display:none;
}
}
@media (prefers-color-scheme: dark) {
.light-mode-hide {
display:initial;
}
}
就这些了，欢迎来评论区，让我知道你的想法！
- 点赞
- 收藏
- 关注作者
评论（0）