一行代码实现黑暗模式

2020 年 10 月 15 日

一行代码实现黑暗模式

其实黑暗模式可以用一行代码来实现。我们看看具体是怎么做到的。🤔

以这个模板为例🖥

现在添加神奇的 CSS

复制代码
html[theme='dark-mode'] {
filter: invert(1) hue-rotate(180deg);
}

就这些!你搞定了✌

黑暗模式完成,但其实有点不合适。

说明

现在我们试着看看幕后发生了什么。

filter 这个 CSS 属性将模糊或颜色偏移等图形效果应用于某个元素。这些滤镜通常用于调整图像、背景和边框的渲染。

对于这种黑暗模式,我们将使用两个滤镜,分别是 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 框架。

原文链接

Dark Mode with only 1 CSS PROPERTY

2020 年 10 月 15 日 10:58 1116
用户头像
小智 InfoQ高级编辑

发布了 385 篇内容, 共 297.6 次阅读, 收获喜欢 1600 次。

关注

评论

发布
暂无评论
发现更多内容

区块链交易所开发源码,数字货币交易所app开发

13530558032

week12学习总结

burner

分布式QoS算法解析

焱融科技

分布式 算法 焱融科技 分布式文件存储 QoS

LeetCode题解:84. 柱状图中最大的矩形,双循环暴力,JavaScript,详细注释

Lee Chen

LeetCode 前端进阶训练营

某Java程序员在外包公司每天读写删改几年后,发现跳不出来了

Java成神之路

Java spring 程序员 面试 架构师

第 0 期架构师训练营第 8 周作业 1

天上星亮晶晶

突破传统 区块链如何实现病历永存

CECBC区块链专委会

区块链 电子病历 信息共享

35K成功上岸华为商城事业部,只因学透了这几个开源的商城项目

Java迁哥

Java 华为 源码 资料 商城项目

架构师 0 期第十二周命题作业

何伟敏

可编程网卡芯片在滴滴云网络的应用实践

滴滴技术

云计算 芯片 滴滴技术

实时数仓在滴滴的实践和落地

滴滴技术

大数据 滴滴技术 数据通道服务

合约跟单系统开发,数字货币合约跟单软件搭建

13530558032

滴滴推理引擎IFX:千万规模设备下AI部署实践

滴滴技术

人工智能 机器学习 AI 滴滴技术 IFX

区块链支付系统源码开发,USDT承兑支付平台

13530558032

浅析LR.Net工作流引擎

Learun

.net 敏捷开发 工作流

区块链技术成为金融业务应用热点

CECBC区块链专委会

区块链 人工智能 金融

拥抱K8S系列-03-服务器部署应用和docker部署应用区别(MySQL篇)

张无忌

MySQL Docker 运维

9块钱,构建个私有网盘,关键不限速

华为云开发者社区

网站 OBS 在线网盘 华为云 云存储

滴滴数据通道服务演进之路

滴滴技术

大数据 滴滴技术 数据服务通道

滴滴数据仓库指标体系建设实践

滴滴技术

大数据 数据仓库 滴滴技术

week12 homework

burner

迭代技术方案设计文档规范

程序员技术进阶

技术方案

滴滴ElasticSearch千万级TPS写入性能翻倍技术剖析

滴滴技术

大数据 elasticsearch 滴滴技术

GPU虚拟机创建时间深度优化

滴滴技术

云计算 虚拟化 滴滴技术

滴滴Ceph分布式存储系统优化之锁优化

滴滴技术

云计算 分布式存储 Ceph 滴滴技术

隐私计算会成为“金融”向“数科”转型的一剂猛药?

hellompc

程序员如何获取一份高薪工作?阿里P8大牛给你一些中肯的建议

Java迁哥

Java 华为 程序员 面试 资料

数字货币钱包系统定制开发,区块链钱包源码

13530558032

第 0 期架构师训练营第 8 周作业2-总结

天上星亮晶晶

基于Prometheus的微服务应用监控

易观大数据

前阿里P8甩我一份内部SpringCloud笔记手册,真香

Java成神之路

Java 阿里巴巴 程序员 Spring Cloud 架构师

一行代码实现黑暗模式-InfoQ