首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一行代码实现黑暗模式

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

以这个模板为例????

现在添加神奇的 CSS

代码语言:javascript
复制
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 度,让我们可以确保应用程序的配色方案不变,而只是减弱其颜色。

使用这种方法的唯一陷阱是,它还将反转应用程序中的所有图像、图片和视频。因此,我们将向所有图像添加相同的规则以反转效果。

代码语言:javascript
复制
html[theme='dark-mode'] img,
picture,
video{
    filter: invert(1) hue-rotate(180deg);
}

并且我们要添加一个类,以反转特定标签内的效果。

代码语言:javascript
复制
.invert {
    filter: invert(1) hue-rotate(180deg);
}

结果????‍????

这样我们就成功实现了黑暗模式。

BBulma 和 Bulma 的模板是基于 Flexbox 的免费开源 CSS 框架。

原文链接

Dark Mode with only 1 CSS PROPERTY

  • 发表于:
  • 本文为 InfoQ 中文站特供稿件
  • 首发地址https://www.infoq.cn/article/3CQX2B1iZIScmGQoeYE5
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券