如何一键改变网页主体颜色？

[liangbus]

今天是 2020年04月04日，是全国哀悼日，向抗击新冠肺炎疫情斗争牺牲的烈士和逝世同胞表示深切哀悼。清明追思，家国永念。愿逝者安息

通常为表达哀悼的情感时，各大网站也会纷纷将其主站色彩调整为黑白或者灰白

曾经我以为更改这些颜色会很麻烦，要每个模块一个个去改，后来才发现只要一个 css 属性就可以完成

filter: grayscale(100%)

在根元素上设置这个样式，整个页面即会加一层滤镜
考虑兼容性的话，还可以补上前缀 -webkit-, -o-

注意的是，这个属性跟以前老版本的 IE 上的 filter 完全不是同一个属性

但是这个属性各大浏览器的支持率并不是很高，见 Can I Use Filter

后续经参考资料发现，filter 还有一个 invert 属性

filter: invert(1);

它可以用作反转图片的颜色，或者指定元素的背景色（前提是有设置背景色）

值为 [0, 0.5) 范围是增加一个有一定灰度值的蒙层
值为 0.5 时是增加一个不透明的灰色蒙层
值为 (0.5, 1] 是反转当前元素色相，如黑 -> 白

通常针对文本类阅读页面可以直接在容器元素上设置该属性实现夜间预览模式，但若存在图片，则需要对图片进行二次 invert(1)

参考：
MDN-grayscale()
MDN-invert()