其实黑暗模式可以用一行代码来实现。我们看看具体是怎么做到的。🤔
以这个模板为例🖥
现在添加神奇的 CSS
复制代码
就这些！你搞定了✌
黑暗模式完成，但其实有点不合适。
说明
现在我们试着看看幕后发生了什么。
filter 这个 CSS 属性将模糊或颜色偏移等图形效果应用于某个元素。这些滤镜通常用于调整图像、背景和边框的渲染。
参考：MDN Web 文档
对于这种黑暗模式，我们将使用两个滤镜，分别是 invert 和 hue-rotate
invert 滤镜用来反转应用程序的配色方案。也就是说黑色会变成白色，白色变成黑色，所有颜色以此类推。invert() 函数作为 filter 属性的值将取 0 到 1 之间的数字，或 0％到 100％的百分比。
hue- rotate 滤镜可以帮助我们处理所有非黑色和白色的颜色。它能将色相旋转 180 度，让我们可以确保应用程序的配色方案不变，而只是减弱其颜色。
使用这种方法的唯一陷阱是，它还将反转应用程序中的所有图像、图片和视频。因此，我们将向所有图像添加相同的规则以反转效果。
复制代码
并且我们要添加一个类，以反转特定标签内的效果。
复制代码
结果🧑🧑
这样我们就成功实现了黑暗模式。
BBulma 和 Bulma 的模板是基于 Flexbox 的免费开源 CSS 框架。
原文链接
Dark Mode with only 1 CSS PROPERTY
InfoQ 主编
最新发布
在最具活力的开源社区当技术委员是一种怎样的体验？
2021 年 1 月 14 日
别再空谈云原生，来看实战方法论
2021 年 1 月 7 日
中国操作系统行业迎来转折点丨 openEuler 见闻录
2020 年 12 月 28 日
Java 避坑指南：Java 高手笔记代码篇
本迷你书包括 86 个业务开发中常见踩坑点。每一个知识点都相当的实用，是程序员业务开发中的必备避坑指南...
BAT 招聘前端工程师，都会问哪些问题？
每日优鲜生鲜零售的智能推荐实践
作为艺术小白，如何欣赏一幅画？
评论