仅使用HTML和CSS的亮暗模式按钮切换_海拥的技术博客_

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

为什么没有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伪选择器：
    <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>的样式：
    <input id="color-mode" type="checkbox" name="color-mode">
    <label for="color-mode">Dark Mode</label>
    <div class="color-scheme-wrapper">
        <!-- Site Content -->
</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 {
    ;
@media (prefers-color-scheme: dark) {
    .dark-mode-hide {
        ;
@media (prefers-color-scheme: dark) {
    .light-mode-hide {
        display:initial;
就这些了，欢迎来评论区，让我知道你的想法！
后面我还会持续更新类似免费好玩的H5小游戏、Java小游戏、好玩、实用的项目和软件等等