CSS 在夜间模式/深色模式中的使用与探索

@chokcoco 2019-11-29 13:51:30发表于 chokcoco/iCSS

本文未完成....


法一:使用 filter: invert

主要借助 invert 这个滤镜实现,定义一个 .dark-mode-invert 挂载在全局根元素 <html>上:

filter: invert(): 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。

图片不能使用 filter: invert 处理,需要再 invert(100%) 转变回来。

.dark-mode-invert {
    filter: invert(100%);
}

.dark-mode-invert img {
    filter: invert(100%);
}

尝试使用掘金作为例子试了下:

转换前:
image

转换后:
image

缺点:

  1. 需要对图片额外处理,如果图片是以 background 嵌入的方式则工作量更大
  2. 转换后的非黑白色不好控制,且效果一般

法二:使用混合模式 mix-blend-mode: difference