后端开发教程 - Java、Spring Boot 实战 - msg200.com
CSS 中的暗黑模式第 2 部分
让我们开始设计
我在博客“CSS 中的暗黑模式”中收到一些反馈，有些人不想使用invert()方法。因此，在“CSS 中的暗黑模式（第二部分） ”中，我也写了如何在不使用 JavaScript 的情况下切换至暗黑模式。
如果您想应用暗黑模式，但不懂 JavaScript，或者不想使用invert() 或 hue-rotate()方法，那么您也可以尝试一下这个。为了更好地理解本文，您应该对 CSS 中的选择器有深入的了解。您也可以查看我的博客“CSS 中的兄弟选择器”。
我们必须记住几点
1) 我们必须将复选框代码放在 body 中容器的上方。这样，容器就是复选框的下一个兄弟。以下代码会更清楚地说明这一点：
<body>
<input type="checkbox">
<div id="container">
</div>
</body>
2）我们必须赋予复选框位置绝对值。
input[type="checkbox"] {
position: absolute;
}
3) 我们将赋予容器所有通常赋予body的属性，例如background。4
) 我们将容器宽度设置为视口的完整宽度，高度设置为 auto 。此外，我们还将赋予容器最小高度，使其等于视口的完整高度。
#container {
width: 100vw;
height: auto;
min-height: 100vh;
}
5）我们将尝试在关闭容器div后不添加任何其他元素。6
）我们将赋予**选择器**边距和顶部、左侧等于零。
* {
top: 0;
left: 0;
margin: 0;
}
让我们开始设计
首先，我们将设计拨动开关
您可以尝试一下这个拨动开关，或者如果您愿意，您可以自己尝试一下。
input[type="checkbox"] {
z-index: 3;
width: 10vw;
height: 4vw;
-webkit-appearance: none;
position: absolute;
outline: none;
border: none;
cursor: pointer;
left: 85vw;
top: 10vh;
border-radius: 2.5vw;
background: #0B0E21;
}
input[type="checkbox"]:before {
content: "";
position: absolute;
width: 3vw;
height: 3vw;
border-radius: 5vw;
background: #f4f1de;
left: .5vw;
top: .5vw;
transition: .5s;
}
input[type="checkbox"]:checked {
background: #f4f1de;
}
input:checked[type="checkbox"]:before {
left: 6.5vw;
background: #0B0E21;
}
让我们设计我们的 Light-Mode 页面
我们将为页面添加背景色，并设置标题和段落的颜色。由于这是浅色模式页面，因此我们将尝试为其设置浅色背景色。
#container {
background: #f4f1de;
}
h1 {
color: #e07a5f;
}
h3 {
color: #3d405b;
}
p {
color: #7E4D65;
}
我们的页面颜色不会发生任何变化。
让我们设计我们的黑暗模式页面
在设计暗黑模式页面的第一阶段，我们将通过更改容器的背景颜色来为页面添加背景颜色。由于这是我们的暗黑模式页面，我们将尝试为其赋予深色背景颜色。我们还将其与我们设计的切换按钮结合使用，以便当我们切换切换按钮时，背景颜色将变为深色。为此，我们将使用同级选择器。为此，我们将使用
下一个同级选择器 (+)。我们将把它应用于切换按钮。从下面的代码中可以更清楚地看出这一点。
input[type="checkbox"]:checked ~ #container {
background: #0B0E21;
}
正如您在上面的例子中看到的，当我们切换时，只有背景颜色会发生变化。
在设计暗黑模式的第二阶段，我们将根据背景颜色更改标题和段落
的颜色，使其看起来更美观。我们还将这些更改与切换开关结合起来，这样当我们切换时，标题和段落的颜色就会根据暗黑模式相应变化。 为此，我们将使用子选择器 (>)。我们将把它应用到切换开关上。下面的代码会更清楚地说明这一点。
input[type="checkbox"]:checked ~ #container > h1 {
color: #1F85A0;
}
input[type="checkbox"]:checked ~ #container > h3 {
color: #C2BFA4;
}
input[type="checkbox"]:checked ~ #container > p {
color: #7E4D65;
}
在这里您可以看到当我们切换时整个页面都会发生变化。
与 invert() 和 hue-rotate() 方法相比，使用此方法有一些优点和缺点。
优点
1）我们可以在暗模式下自定义每个元素。2
）图像的颜色不会像在 invert() 方法中那样被反转。
缺点
1) 你必须牢记这 6 点。2
) 你必须为每个想要在切换时看到变化的元素编写代码。3
) 你必须对 CSS 中的选择器有充分的了解。