仅使用HTML和CSS的亮暗模式按钮切换-阿里云开发者社区

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

2023-04-27 193

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 建立仅html和css的亮暗模式切换的快速指南。文章末尾给出了完整代码

建立仅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小游戏、好玩、实用的项目和软件等等

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

为什么没有JavaScript？

怎么运行的：

首先让我们添加CSS variables。

根据用户偏好更改标签

1.CSDN积分下载

2.关注公众号免费下载

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

为什么没有JavaScript？

怎么运行的：

首先让我们添加CSS variables。

根据用户偏好更改标签

1.CSDN积分下载

2.关注公众号免费下载

热门文章

最新文章

相关课程

相关电子书

相关实验场景