后端开发教程 - Java、Spring Boot 实战 - msg200.com
仅限 HTML 和 CSS 的暗模式切换按钮。
AWS 安全上线！
构建html唯一切换css的快速指南dark-mode。
使用 just css，html我们将构建一个按钮：
light-mode和之间的变化dark-mode- 默认为用户喜欢的配色方案
- 更改标签以反映用户喜欢的配色方案。
为什么没有 javascript？
我一直在建立一个网站，为棋盘游戏玩家提供一些工具。比如骰子和随机扑克牌之类的简单工具。
我的目标之一是让每个工具都无需 即可工作javascript。该网站还具有dark-mode和light-mode。 （以及一些其他配色方案）。
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>。
所以，我们想个变通办法。我们把一个 放在<div>我们的 后面checkbox，它的作用是<body>。然后我们设置 的样式<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允许我们定义基于 而变化的颜色checkbox。我们只使用两种颜色，一种用于背景，一种用于文本：
: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我们将交换我们的light-mode和dark-mode主题。
因此，如果用户的设备已dark-mode启用，它会从黑暗开始：
: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);
}
根据用户偏好更改标签。
现在我们已经交换了dark-mode，light-mode我们需要确保复选框的标签反映了这一点。
如果标签上显示“dark-mode已打开”，但屏幕却是亮白色的，那就太让人困惑了。
这个问题也有一个快速解决方法。首先，我们为每个用户偏好设置添加两组文本<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;
}
}
就是这样。告诉我你的想法！
如果你能想出一个巧妙的方法，让导航到其他页面后配色方案保持不变，请告诉我。
另外 -使用而不是 也有很好的理由input[type=radio]input[type=checkbox]。但是用复选框更容易说明这个概念。
链接：
以下是带有一些额外样式的示例链接：codepen.io
这是五色版本的链接：
missingdice.com