在《DarkMode(1):产品应用深色模式分析》提过,单纯反转是不行的。但是,把不需要反转的,在反转过来。或者用js,给想要反转的,加上反转样式,再对其他的做微调。这样个人觉得,开发成本是最低的
@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.
真正实战与项目,一般是这样的
.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;
}
}
}
这个也大致可用。这是最省事的办法。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!