仅使用HTML和CSS的亮暗模式按钮切换

鲸落c

发布于 2022-11-14 16:28:31

4K00

代码可运行

文章被收录于专栏：鲸落学习笔记鲸落学习笔记

运行总次数：0

代码可运行

建立仅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积分下载

https://download.csdn.net/download/qq_44273429/15817885

2.关注公众号免费下载

关注作者微信公众号啦啦啦好想biu点什么回复亮暗模式切换免费获取，也可在公众号上向我反馈遇到的问题，看到我会及时回复。

后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等