使用一行CSS代码-开启网站黑暗和白天双模式

作者 : IT 大叔 本文共611个字,预计阅读时间需要2分钟 发布时间: 2020-09-1

这是将开发的网站转换为支持暗模式的绝对明智的方法。

事不宜迟,让我们开始吧!👾

以这个新闻应用程序为例

使用一行CSS代码-开启网站黑暗和白天双模式插图

现在添加魔术CSS

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

瞧!你完成了✌

达到暗模式

使用一行CSS代码-开启网站黑暗和白天双模式插图(2)

说明

现在,让我们尝试了解幕后情况。

filterCSS属性应用于像模糊或色移的元素的图形效果。滤镜通常用于调整图像,背景和边框的呈现。(参考:MDN Web文档

对于这个黑暗模式,我们将使用两个过滤器,即inverthue-rotate

反转滤镜有助于反转应用程序的配色方案。因此,黑色变成白色,白色变成黑色,所有颜色都类似。

色相旋转滤镜可以帮助我们处理所有其他非黑色和白色的颜色。将色相旋转180度,我们可以确保应用程序的颜色主题不会改变,而只是减弱其颜色。 使用此方法的唯一陷阱是,它还将反转应用程序中的所有图像。因此,我们将向所有图像添加相同的规则以反转效果。

使用一行CSS代码-开启网站黑暗和白天双模式插图(4)

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

并且我们还将向HTML元素添加过渡,以确保过渡不会变得浮华!

html {
    transition: color 300ms, background-color 300ms;
}

结果: 我们已经实现了暗模式。你们干得好!
使用一行CSS代码-开启网站黑暗和白天双模式插图(6)

我的日子充满了咖啡,只有咖啡。所以我知道,你知道我们所有人应该做什么🤞

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 使用一行CSS代码-开启网站黑暗和白天双模式

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论