前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >DarkMode(4):css滤镜 颜色反转实现深色模式

DarkMode(4):css滤镜 颜色反转实现深色模式

原创
作者头像
周陆军
发布于 2020-12-11 14:51:01
发布于 2020-12-11 14:51:01
1.9K00
代码可运行
举报
文章被收录于专栏:前端架构前端架构
运行总次数:0
代码可运行

在《DarkMode(1):产品应用深色模式分析》提过,单纯反转是不行的。但是,把不需要反转的,在反转过来。或者用js,给想要反转的,加上反转样式,再对其他的做微调。这样个人觉得,开发成本是最低的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@media (prefers-color-scheme: dark) {
 // one
 .app{
  filter: invert(1) hue-rotate(180deg);
  img,button,.active {
    //filter: brightness(.8) contrast(1.2);
    filter: invert(1) hue-rotate(180deg);
  }
 }
 // two
 div:not(.no-invert){
   filter: invert(1) hue-rotate(180deg);
 }
 // three
 :not(img) { filter: invert(100%) hue-rotate(180deg); } 
}

老外说:It’s not 100% accurate in my case, because my dark background color is not perfectly black, but it’s better than nothing.

真正实战与项目,一般是这样的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.dark-mode-box {
    filter: invert(1) hue-rotate(180deg);
    
    // 不需要反转的,在反转回去
    // 图片
    img,
    iframe,
    // element 元素
    .el-tag--primary, .el-tag--success, .el-tag--warning, .el-tag--error,
    .el-button--primary, .el-button--primary,
    .invert-restore{
        filter: invert(1) hue-rotate(180deg);
    }
    .invert-restore{
        // 反转回去的,里面的东西,在去除反转
        img{
            filter: none;
        }
    }
}

这个也大致可用。这是最省事的办法。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
一行代码就实现 WordPress 博客暗黑模式
暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式,现在主流的操作系统都已经支持暗黑模式了,比如 Mac 系统的暗黑模式:
Denis
2023/04/13
3650
一行代码就实现 WordPress 博客暗黑模式
Dark Mode 实践踩坑记录
只能说,实现 Dark Mode 的尽头是手写。 手机 QQ 最近火急火燎地整改,暗黑模式的支持就是其中的一个整改项。由于腾讯课堂在手机 QQ 有一个常驻入口,因此我们也要按照它们的要求实现真正意义上的 dark mode 支持 (而不是目前手机 QQ 强制给加的一层灰色蒙层)。 大学时候有个项目也是自己设计和实现的 dark mode 支持,当时是手写的,依稀记得后面从哪些文章里看到说可以一行代码实现暗黑模式云云,于是企图在这次实践过程中应用下这些奇技淫巧,然而经过一天的实践,我发现这些方法有绕不过的坑,
用户1097444
2022/06/29
5880
Dark Mode 实践踩坑记录
几行代码,给自己的网站安排暗黑模式!
最近,看到不少网站都有暗黑模式,能够让我们在夜晚浏览网站的时候保护双眼,所以花费了半天的时间研究了一下,给蘑菇安排上了。
陌溪
2022/05/26
1K0
几行代码,给自己的网站安排暗黑模式!
CSS常用滤镜属性讲解
但是我们发现图片的边缘也模糊了 如何解决这个问题,也很简单.只要在外面包一层div 设置超出隐藏就行了
心安事随
2024/07/29
2000
CSS常用滤镜属性讲解
巧用 CSS3 filter(滤镜) 属性
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
唐志远
2022/10/27
1.5K0
巧用 CSS3 filter(滤镜) 属性
一行代码实现黑暗模式
filter 这个 CSS 属性将模糊或颜色偏移等图形效果应用于某个元素。这些滤镜通常用于调整图像、背景和边框的渲染。
深度学习与Python
2020/10/23
5470
一行代码实现黑暗模式
使用一行css实现黑白色主题皮肤的切换
filter是一个非常神奇的属性,能将Photoshop一些基础的滤镜效果应用到网站上
itclanCoder
2023/09/14
4510
使用一行css实现黑白色主题皮肤的切换
CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解
一、前言                                  IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜、JS+DIV或VML处理!本篇为先占个坑,以后慢慢填^_^!!!   CSS3 Filter
^_^肥仔John
2018/01/18
2K0
CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解
CSS3滤镜效果可在动画中使用
<!doctype html> <html> <head> <style> img{display:block;} .box{width:600px;} .box img{width:100%;} /*灰度效果*/ @keyframes changeGrayscale{ from{-webkit-filter:grayscale(0%);} to{-webkit-filter:grayscale(100%);} } .filter_grayscale{animation:changeGraysca
用户1730674
2018/05/02
1.3K0
CSS3滤镜效果可在动画中使用
CSS3 filter(滤镜)
filter属性可以应用于所有元素,在SVG中,它适用于除<defs>元素外的容器元素和所有图形元素。此属性不是继承属性,其计算值为指定值,动画类型为滤镜函数列表。
用户4547779
2024/10/30
1890
CSS3 filter(滤镜)
CSS3 滤镜 -webkit-filter 的介绍和使用
大家可能对 Instagram 这款 iPhone APP 上的滤镜效果很感兴趣,其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的规范,Webkit 率先支持了它。
Denis
2023/04/14
5760
CSS3 滤镜 -webkit-filter 的介绍和使用
css3 filter滤镜属性使用
最近在修改内网门户的时候,恰好遇到了需要使用滤镜的地方;刚开始用的是两张图片;鼠标滑过背景变成渐变;图标切换;但是后台配置了图标后;导致鼠标滑过图标不能正常切换;于是就想到了滤镜的效果来处理。所以顺便学习了一下常用的滤镜效果。
微芒不朽
2022/04/28
1.3K0
b站全灰,但我一下把它弄回来了——css 滤镜
首先,职业下意识就打开了控制台。为什么呢?是想看看怎么实现的,是css自定义属性吗?是引入一份css吗?是预处理器修改全局变量吗?结果,打开控制台,浏览了一下,最后定位发现在于一行css代码,关掉就变成彩色了
lhyt
2019/12/17
2.3K0
b站全灰,但我一下把它弄回来了——css 滤镜
CSS filter 有哪些神奇用途
CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染。它的值可以为 filter 函数 <filter-function> 或使用 url 添加的svg滤镜。
coder_koala
2021/07/08
1.4K0
CSS filter 有哪些神奇用途
CSS3 -webkit-filter 滤镜
HTML5学堂:在早期网页要实现图片的色相旋转、灰色度的变化,只能用ie的滤镜来实现。直到CSS3出来之后,可以用filter来实现了,接下来详细的了解filter的使用 语法: 选择器 { filter: none | <filter-value> [ <filter-value> ]* } 语法分析: 属性值的归纳 none–默认值 grayscale(value)–灰度,value:0~1; sepia(value)–褐色,value:0~1; saturate(value)–饱和度,value:
HTML5学堂
2018/03/12
7390
CSS3 -webkit-filter 滤镜
如何在CSS中使用变量
原文链接:https://www.sitepoint.com/how-to-use-variables-in-css/[1]
chuckQu
2022/09/20
3.1K0
如何在CSS中使用变量
css3的一些属性--filter(滤镜) 属性
一般用来给图像设置高斯模糊 修改所有图片的颜色为黑白 (100% 灰度) img{ -webkit-filter:grayscale(100%);/\* Chrome, Safari, Opera \*/ filter:grayscale(100%); } 语法: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opac
wust小吴
2019/10/31
5700
DarkMode(3):sass函数实实现深色模式操作
上文《DarkMode(2):深色模式解决方案——css颜色变量实现Dark Mode》,完全基于样色抽离变量,然后使用预处理其,生成两套样式。切换样式文件。
周陆军
2020/12/11
1.4K0
CSS瞬间黑暗模式
最近微信也逃脱不了黑暗时代的到来,网页也很多都做了黑暗模式的兼容和主题。如果我们在做的一个网站想瞬间实现黑暗模式可以怎么实现呢?
前端开发博客
2020/11/04
1.1K0
CSS瞬间黑暗模式
「趣学前端」filter滤镜,CSS的PS特技
这一切都要从一次磨砂效果说起,之前做手机屏幕特效,主控按键的指纹效果,是真没有方向。后来想老款手机带软膜的,有点磨砂的感觉,所以我想到用滤镜功能实现它。
叶一一
2022/10/24
8100
「趣学前端」filter滤镜,CSS的PS特技
相关推荐
一行代码就实现 WordPress 博客暗黑模式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验