前端例程20221102：黑暗模式（Dark Mode）

最新推荐文章于 2024-04-09 09:45:49 发布
最新推荐文章于 2024-04-09 09:45:49 发布
阅读量1.6k 收藏 5
点赞数 3
分类专栏： Web与JS相关 文章标签： Dark Mode 夜间模式 CSS 设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Naisu_kun/article/details/127634436
版权

文章目录

演示

在这里插入图片描述

原理

  • 使用CSS自定义属性来定义页面中用到的各个颜色；
  • 设计一套正常的颜色和一套黑暗模式的颜色；
  • 通过JS或媒体查询来选择使用哪一套颜色；
  • 这里使用JS配合CSS属性选择器来选择使用哪一套颜色；

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>黑暗模式</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            user-select: none;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100vh;
            width: 100vw;
        }
    </style>

    <style>
        /* 普通模式下颜色 */
        :root {
            --color-bg: #ffffff;
            --color-ch: #30303a;
            --color-btn: #f0f0fa;
        }

        /* 黑暗模式下颜色 */
        :root[theme='dark'] {
            --color-bg: #1a1a1f;
            --color-ch: #d0d0da;
            --color-btn: #30303a;
        }

        /* 颜色设计时注意避免纯黑纯白的对比度的选择 */
        /* 使用略带色彩的灰比纯灰可以有更加鲜活的感觉 */

        :root * {
            /* 过渡动画效果 */
            transition: background-color 0.3s, color 0.3s;
        }

        body {
            position: relative;
            background-color: var(--color-bg);
            /* transition: 0.3s; */
        }

        h1 {
            /* 下面四行使文本水平垂直居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: sans-serif;
            font-size: 3rem;
            letter-spacing: 0.25rem;
            color: var(--color-ch);
            /* transition: 0.3s; */
        }

        button {
            position: absolute;
            top: 1rem;
            left: 1.5rem;
            height: 48px;
            width: 48px;
            border-radius: 50%;
            border: none;
            outline: none;
            background-color: var(--color-btn);
            display: flex;
            align-items: center;
            justify-content: center;
            /* transition: 0.3s; */
        }

        button>svg {
            height: 36px;
            width: 36px;
            fill: var(--color-ch);
            stroke: none;
        }

        button>svg:nth-child(2) {
            display: none;
        }
    </style>
</head>

<body>
    <button>
        <svg viewBox="0 0 24 24">
            <path
                d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z">
            </path>
        </svg>
        <svg viewBox="0 0 24 24">
            <path
                d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z">
            </path>
        </svg>
    </button>
    <h1>Light Mode</h1>
    <script>
        const root = document.documentElement;
        const button = document.querySelector('button');
        const svgs = document.querySelectorAll('button>svg');
        const text = document.querySelector('h1');

        button.onclick = () => {
            if (!root.hasAttribute('theme')) { // 检查当前主题
                root.setAttribute('theme', 'dark'); // 向根节点插入theme属性，值为dark
                // 这样页面中颜色就会匹配 :root[theme='dark'] { ... } 这一套
                svgs[0].style.display = 'none';
                svgs[1].style.display = 'block';
                text.innerText = 'Dark Mode';
            } else {
                root.removeAttribute('theme'); // 移除根节点theme属性
                svgs[1].style.display = 'none';
                svgs[0].style.display = 'block';
                text.innerText = 'Light Mode';
            }
        };
    </script>
</body>

</html>

更多补充

prefers-color-scheme

prefers-color-scheme 是一个媒体查询的特性选项，可以用来查询浏览器处于何种主题色下。其可选值为 no-preference light 和 dark 。通常可以使用下面方式自动根据浏览器设置来匹配样式：

@media (prefers-color-scheme: dark) {
    /* 黑暗模式样式 */
}

@media not (prefers-color-scheme: dark) {
    /* 非黑暗模式样式 */
}

filter和mix-blend-mode

对html元素使用下面样式也可以实现对页面所有元素的亮暗翻转，这是一种非常简单的实现黑暗模式的方法：

html {
  filter: invert(100%) hue-rotate(180deg);
}

invert(100%) 会反转页面中所有颜色，对于灰度来说就是亮暗模式的变化了，白色变黑色、浅灰变深灰；invert 对于彩色而言色相也会有较大变化，所以需要使用 hue-rotate(180deg) 在一定程度上修正对于色相的变化，当然这个修正和原先的颜色还是会存在一些偏差的。

下面方式和上面方式效果差不多：

html {
  mix-blend-mode: difference;
  filter: hue-rotate(180deg);
}

这两种方式使用时还需要注意的是部分元素可能需要设置初始颜色才会生效，比如 html 或 body 需要设置初始背景颜色才会生效。

Darkmode.Js

Darkmode.Js是一个可以在现有页面的基础上快速实现黑暗模式的JS库，官方页面、项目地址和演示如下：
https://darkmodejs.learn.uno/
https://github.com/sandoche/Darkmode.js
在这里插入图片描述

Darkmode.Js默认会在页面下方放置一个按钮用来实现模式的切换。你也可以自定义按钮样式或者隐藏按钮。可以使用JS来切换模式和查询当前模式。

Darkmode.Js会识别哪些地方需要变色，哪些地方不需要变色，这点比上面的方法好。

更多例程

更多例程可以参考下面代码仓库：
https://github.com/NaisuXu/front-end-web-examples

Naisu Xu
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS 3.0的过滤属性实现黑暗模式
越陌度阡
06-10 1185
现在很多的网站都喜欢采用黑暗模式，毕竟这种界面看起来逼格比较高端，比如下面这样的效果： 你可能会认为这是不是需要写两套样式，其实不用，用一个属性就可以变成黑暗模式，以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid
html页面禁用darkmode,扫盲， H5适配暗黑主题（DarkMode）全部解法
weixin_28946735的博客
06-09 2290
前景暗黑主题下，用户可以选择采用深色的系统范围外观而不是浅色外观。在暗黑模式下，系统对所有窗口，视图，菜单和控件采用较暗的调色板。谷歌的 Gmail 和 Chrome 浏览器、聊天工具 slack、telegram、Edge 浏览器和 Office 移动版 App 都陆续支持 darkmode 了。Youtube 今年全面引入了网页版、手机和平板统一设计的新界面。随着系统级别的支持，其他主流应用程...
【前端教程】给网站添加暗黑模式指南
weixin_47143210的博客
04-23 1605
导读：给网站添加暗黑模式是随着macOS中的暗黑模式（Dark Mode）出现之后的一个热门话题。社区中有关于这方面的讨论也很多，都在围绕着怎么给网站添加暗黑模式。今天在这篇文章再次和大家一起聊聊这个已久的话题，不同的是，这篇文章将和大家从不同的角度来聊怎么给网站添加暗黑模式。感兴趣的同学，请继续往下阅读。 暗黑模式是系统级别的 所谓的暗黑模式并不是现在才有的，这个事实已经存在很久了。如果你...
【Android：简单夜间模式切换实现】夜间模式切换，完整代码奉上！
凉城古梦猫扑街的博客
04-04 4742
Android：简单夜间模式切换实现，夜间模式切换，完整代码奉上！
推荐开源项目：VueDarkMode - 灵活易用的暗色模式解决方案
gitblog_00057的博客
04-09 284
推荐开源项目：VueDarkMode - 灵活易用的暗色模式解决方案 项目地址:https://gitcode.com/LeCoupa/vuedarkmode 项目简介 VueDarkMode 是一个轻量级、高度可定制的 Vue.js 插件，它为你的 Vue 应用程序提供了无缝切换暗色与亮色主题的功能。该项目由开发者 LeCoupa 创建并维护，旨在提供一个优雅且易于集成的暗黑模式解决方案。 技术...
CSS | 使用 PostCSS 插件让 Web 应用支持暗黑模式
分享技术类相关知识点、技巧，和大家一起成长。
06-14 584
使用 PostCSS 插件让 Web 应用支持暗黑模式
ADAU1701进阶例程：噪声处理
04-23
ADAU1701进阶例程：噪声处理
7.OneNET-V3.2-扩展例程_：麒麟座开发板Onenet扩展例程_
10-02
官方例程代码，帮助初学者快速学习上手，迅速掌握各种开发板硬件资源的使用方法
龙芯1B：总测试模块例程
08-25
龙芯1B：总测试模块例程
龙芯1B：蜂鸣器使用例程
08-25
龙芯1B：蜂鸣器使用例程
ADSP-BF533的例程源码17：中断
最新发布
06-03
ADSP-BF533的例程源码17：中断
CSS变量实现暗黑模式的示例代码
11-21
最近微信被苹果逼的开发了 暗黑模式 ，越来越多的网站和应用开始支持了暗黑模式，许多人也喜欢为网站选择暗模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。 这篇文章将告诉你如何实现一个自动的 CSS 暗模式，根据你的访客的主题来改变。 我在自己的博客页面 我的小铺 [1] 页面实践了一下用 CSS变量 和 @media查询 实现暗黑模式。   CSS Dark Mode 我定义了变量以设置主题的颜色，我建议你也这样做，因为这样会使这个过程容易得多。我的默认模式的颜色变量如下: :root { --accent: #226997; --main: #333; --lig
一行代码让网页变成暗黑模式
前端精髓
09-16 3789
让自己的网站变成暗黑模式只需要一行简简单单的CSS代码就可以完成啦： html[theme='dark-mode'] { filter: invert(1) hue-rotate(180deg); } 来看看最终的效果如何： 从图中我们可以看得，网站的整个背景都变成了黑色的，字体变成来白色的。具体的转换规则是如何实现的呢，我们需要了解CSS的属性了。 filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。 CSS 标准里包含了一些已实现预定义效果的.
网页黑夜模式白天模式切换 html+css+js
热门推荐
你好呀，很高兴你在看这里~
12-21 1万+
效果： 先言： 实现是很简单的，就是背景色的切换，用的是最基础的js； 1.定义开关按钮标签，‘bai’就是里面那个小圆圈： <div class="kaiguan" > <div class="bai" id="anniu"></div> </div> 2.开关按钮的样式： .kaiguan{ position: absolute; top: 20px;
CSS瞬间黑暗模式
前端开发博客
09-07 1086
最近微信也逃脱不了黑暗时代的到来，网页也很多都做了黑暗模式的兼容和主题。如果我们在做的一个网站想瞬间实现黑暗模式可以怎么实现呢？其实有一个很快的方式，我们可以使用invert和hue-r...
给网站添加暗黑模式指南
阿里云开发者
02-27 5044
简介：给网站添加暗黑模式是随着macOS中的暗黑模式（Dark Mode）出现之后的一个热门话题。社区中有关于这方面的讨论也很多，都在围绕着怎么给网站添加暗黑模式。今天在这篇文章再次和大家一起聊聊这个已久的话题，不同的是，这篇文章将和大家从不同的角度来聊怎么给网站添加暗黑模式。感兴趣的同学，请继续往下阅读。 作者|廖伟华(大貘) 出品|阿里巴巴新零售淘系技术部 暗黑模式...
html+css瞬间黑暗模式
beichenxiansen的博客
04-30 2514
最近微信也逃脱不了黑暗时代的到来，网页也很多都做了黑暗模式的兼容和主题。如果我们在做的一个网站想瞬间实现黑暗模式可以怎么实现呢？ 其实有一个很快的方式，我们可以使用invert和hue-rotate两个CSS3过滤器来实现。 filter: invert() — 是从0到1的刻度，1是从白变黑。 filter: hue-rotate() — 用于改变你元素的颜色，同时或多或少保持原本相同的色系。...
H5项目适配系统深色模式方案总结
LYFlied的博客
04-13 3173
文章目录一、背景二、问题三、H5项目适配深色模式方案1.声明 color-scheme1.1meta1.2CSS2.通过 CSS 媒体查询3.图片适配4. JavaScript中判断当前模式&监听模式变化4.1matchMedia4.2addListener()JavaScript监听判断 一、背景 随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减
iOS 13 DarkMode 暗黑模式
iOS开发程序媛
10-10 4072
iOS 13终于引来了暗黑模式。 每当新特性的到来，iOS开发者们既紧张又有点小兴奋，怀揣着被虐的心态，让我们来看看暗黑模式到底是个啥。 虽然这是一个设计驱动的需求，但是本着一颗虔诚(暴躁)的心，我们还是要一步步来，“工欲善其事、必先利其器”，搞清楚应该怎么做。 下载 Xcode11，跑起来你的项目。模拟器启动后，在“设置”-“开发者”中打开“Dark Appearance”后，你的项目就自...
二次p的PID 控制器的 C 语言例程：
07-08
以下是一个实现二次P的PID控制器的C语言例程： ```c #include <stdio.h> float pid(float error, float kp, float ki, float kd, float dt); int main() { float setpoint = 50.0; // 设定值 float kp = 0.5; // 比例系数 float ki = 0.2; // 积分系数 float kd = 0.1; // 微分系数 float dt = 1.0; // 采样时间 float output, error, integral = 0.0, derivative = 0.0; float process_variable = 0.0; // 过程变量 printf("Enter process variable: "); scanf("%f", &process_variable); while (1) { error = setpoint - process_variable; output = pid(error, kp, ki, kd, dt); process_variable += output; printf("Process variable: %f\n", process_variable); // 更新积分项和微分项 integral += error * dt; derivative = (error - derivative) / dt; // 等待采样时间 sleep(dt); } return 0; } // 二次P的PID控制器函数 float pid(float error, float kp, float ki, float kd, float dt) { return (kp * error) + (ki * error * error) + (kd * (error - dt)) / dt; } ``` 这个例程实现了一个二次P的PID控制器，其在计算控制器输出时使用了误差的平方。其余部分与前面的例程相似。请注意，二次P的PID控制器并不常见，您可能需要根据具体需求进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Naisu Xu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值