建立仅html和css的亮暗模式切换的快速指南。文章末尾给出了完整代码
演示效果：
活链接
使用css，html我们将建立一个按钮，该按钮：
light-mode和dark-mode之间的变化- 默认为用户首选的配色方案
- 更改标签以反映用户的首选配色方案。
为什么没有JavaScript？
我的目标之一是使每个工具都可以不使用javascript，以一定程度上简化代码，同时也是个挑战。
我需要一种dark-mode 无需javascript进行切换的方法，同时仍然默认为visitor preferred-color-scheme。
这是我的解决方案，针对本教程进行了简化：
怎么运行的：
大多数dark-mode切换按钮的工作方式是更改标签上的属性，然后在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> 复制代码
我们需要确保输入是我们中的第一件事，因此我们可以将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; } } 复制代码
就这些了，欢迎来评论区，让我知道你的想法！
1.CSDN积分下载
download.csdn.net/download/qq…
2.关注公众号免费下载
关注作者微信公众号啦啦啦好想biu点什么回复亮暗模式切换免费获取，也可在公众号上向我反馈遇到的问题，看到我会及时回复。
后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等
