🌌暗黑模式高效适配

freeflydom

2023年12月25日 16:0 本文热度 329

滤镜-反色

filter: invert(1) hue-rotate(180deg);

html {
  filter: invert(1) hue-rotate(180deg);
}
html img, html svg {
  filter: invert(1) hue-rotate(180deg);
  opacity: .85;
}

根节点设置180度反色，之后对图片进行再一次的180度反色（此时恢复成原色），然后稍微降低透明度。不支持IE，其他端支持良好

滤镜-明度降低

直接对根节点进行滤镜明度降低，整站快速适配，不过不兼容IE filter: brightness(.5);

{   filter: brightness(.5); }

蒙层遮罩

可以background做蒙层、也可以shadow做蒙层、也可以outline做蒙层。

<!-- bgc-不兼容IE -->
<div class="mask"></div>
.mask {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background-color: rgba(0, 0, 0, .1);
  z-index: 10000;
  pointer-events: none;
}

<!-- shadow-兼容IE9+ -->
<div class="mask"></div>
.mask {
  position: fixed;
  top: 0; left: 0;
  box-shadow: 0 0 0 200vh rgba(0, 0, 0, .1);
  z-index: 10000;
}

<!-- shadow-兼容IE8+ -->
<div class="mask"></div>
.mask {
  position: fixed;
  top: 0; left: 0;
  outline: 100vh solid rgba(0, 0, 0, .1);
  z-index: 10000;
}

方式选择推荐

如果不涉及大量交互动画，首推通过媒体查询直接对支持深色模式的进行滤镜反色。
有些非跟随系统设置，而是通过用户设置的开关进行控制的话，如果要考虑低端机兼容建议蒙层遮罩，这个不会有性能问题而且可以低端兼容

作者：Shinea
链接：https://juejin.cn/post/7038175230891655205
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

该文章在 2023/12/25 16:01:21 编辑过

关键字查询

模式

适配

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。