DarkMode(4)：css滤镜 颜色反转实现深色模式
2020-12-17 23:33
标签：app not ase img 图片 ack refers box element @media (prefers-color-scheme: dark) { 真正实战与项目，一般是这样的 .dark-mode-box { } DarkMode(4)：css滤镜 颜色反转实现深色模式 标签：app not ase img 图片 ack refers box element 原文地址：https://blog.51cto.com/zhoulujun/2563052
// 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.
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;
}
}
这个也大致可用。这是最省事的办法。
文章标题：DarkMode(4)：css滤镜 颜色反转实现深色模式
文章链接：http://soscw.com/index.php/essay/36958.html