一行代码实现黑暗模式
时间:2022-07-28
本文章向大家介绍一行代码实现黑暗模式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
作者丨Dip Vachhani
译者丨王强
策划丨小智
其实黑暗模式可以用一行代码来实现。我们看看具体是怎么做到的。
以这个模板为例:
现在添加神奇的 CSS
html[theme='dark-mode'] {
filter: invert(1) hue-rotate(180deg);
}
就这些!你搞定了。
黑暗模式完成,但其实有点不合适。
说 明
现在我们试着看看幕后发生了什么。
filter 这个 CSS 属性将模糊或颜色偏移等图形效果应用于某个元素。这些滤镜通常用于调整图像、背景和边框的渲染。
- 参考:MDN Web 文档
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
对于这种黑暗模式,我们将使用两个滤镜,分别是 invert 和 hue-rotate
invert 滤镜用来反转应用程序的配色方案。也就是说黑色会变成白色,白色变成黑色,所有颜色以此类推。invert() 函数作为 filter 属性的值将取 0 到 1 之间的数字,或 0%到 100%的百分比。
hue- rotate 滤镜可以帮助我们处理所有非黑色和白色的颜色。它能将色相旋转 180 度,让我们可以确保应用程序的配色方案不变,而只是减弱其颜色。
使用这种方法的唯一陷阱是,它还将反转应用程序中的所有图像、图片和视频。因此,我们将向所有图像添加相同的规则以反转效果。
html[theme='dark-mode'] img,
picture,
video{
filter: invert(1) hue-rotate(180deg);
}
并且我们要添加一个类,以反转特定标签内的效果。
.invert {
filter: invert(1) hue-rotate(180deg);
}
结果:
这样我们就成功实现了黑暗模式。
BBulma 和 Bulma 的模板是基于 Flexbox 的免费开源 CSS 框架。
延伸阅读:
https://dev.to/dip15739/dark-mode-with-only-1-css-property-17fl
- 字符串处理技巧
- SwipeRefreshLayout下拉刷新组件
- 使用数字进行字符遍历
- 技术分享:杂谈如何绕过WAF(Web应用防火墙)
- 模拟Executor策略的实现如何控制执行顺序?怎么限制最大同时开启线程的个数?为什么要有一个线程来将结束的线程移除出执行区?转移线程的时候要判断线程是否为空遍历线程的容器会抛出ConcurrentM
- ViewPager快速实现引导页
- Linux学习 - 常用和不太常用的实用awk命令
- 漏洞预警:厄运cookie(Misfortune Cookie)漏洞影响全球1200万台路由器
- 漏洞预警:Google安全研究人员发现NTP(网络时间协议)最新漏洞
- 揭秘:从内部源码看Facebook技术(第一集)
- Python 自然语言处理《釜山行》人物关系
- 注意:C++中double的表示是有误差的
- 完善RecyclerView,添加首尾视图
- 初识Node.js
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Go 数据存储篇(二):通过 JSON 格式存取文本数据
- Go 数据存储篇(三):通过 CSV 格式读写文本数据
- Laravel 8 正式发布,一起来看看有哪些新特性吧
- Azkaban 2.5 Documentation
- 噪声纹理之消融效果! shader 入门精要! Cocos Creator Shader !
- Docker安装官方Nexus3镜像构建Docker私服 实践笔记
- js事件大全
- Centos7 安装 jdk8 的正确姿势 实践笔记
- 初探雾效果!shader 源码分析与讲解! Cocos Creator 3D Shader Fog !
- js键盘键值大全
- mysql用户创建+密码修改+删除用户+角色分配 的正确姿势 实践笔记
- Centos7 安装 Nginx 的正确姿势 并设置开机自启 实践笔记
- js函数大全(2)
- HTML之打开/另存为/打印/刷新/查看原文件等按钮的代码
- Centos7 安装 Keepalived+Nginx 双机热备HA 的正确姿势 并开机自启 实践笔记