🌌暗黑模式高效适配

随着iOS13的更新，暗黑模式开始变得普及化～

如何去适配darkmode开始变成前端需要考量的技术方案了，下面将根据我自己的项目经验来描述一下

滤镜-反色

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);

html {
  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;
}

方式选择推荐

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