快速给网站加上黑暗模式

随着各大电脑和移动操作系统纷纷推出了黑暗模式，越来越多的网站和 App 都跟进了该功能，为实现用户的一致体验，赶紧看看怎么添加吧。

实现原理

本文所介绍的方法主要用到了 CSS 的 filter「滤镜属性」。用到了它的 invert(%)「颜色反转」和 hue-rotate(deg)「色相反转」。

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

可直接在网页的 CSS 样式表中加入上述代码预览效果。

invert(1) 颜色反转，反向输出图像着色，值为「1」说明完全反转。
hue-rotate(180deg) 调整色相，值为「180deg」说明调整色相180°。

实际使用中「invert」值取「0.85」效果最佳。

通过这两步就基本实现了黑暗效果。但是我们会发现页面上的图片等媒体的颜色会变得不正常，影响观看，这时可以为他们新建规则来抵消颜色变化，仅添加一个亮度降低效果即可。

img, video {
  filter: invert(1) hue-rotate(180deg) brightness(0.9);
}

可为任何不希望颜色调整的元素添加上述样式。

brightness(0.9) 调整亮度，值为「0.9」说明降低亮度为原来的 0.9 倍。

取值列表

下表为 filter 的一些可取属性及其描述，可根据需求选择其它变化。

取值	描述
`none`	默认值，无效果。
`blur(px)`	设置高斯模糊，值越大越模糊。
`brightness(%)`	调整亮度，值取 0% 显示全黑，值取 100% 无变化。
`contrast(%)`	调整对比度，值取 0% 显示全黑，值取100% 保持原样，超过 100% 则降低对比度。
`grayscale(%)`	转化灰度图像，值取 100% 转为灰度显示，值取 0% 图像无变化。
`hue-rotate(deg)`	调整色相，取值为调整色环角度值。
`invert(%)`	颜色反转，值定义调整比例。
`opacity(%)`	调整透明度，值定义调整比例。
`saturate(%)`	调整饱和度，值取 100% 转为显示为黑白灰，值取 0% 图像无变化。
`sepia(%)`	转化深褐色，值定义调整比例。
`url()`	URL 函数接受一个 XML 文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
`initial`	设置属性为默认值。
`inherit`	从父元素继承该属性。

明暗切换

在页面 body 中合适位置添加如下代码添加选择框，可根据页面风格给它指定样式，如何实现切换参考下文运用实例。

<input class="switch-btn" type="checkbox">

运用实例

<input class="switch-btn" type="checkbox">
<style>
  .switch-btn:checked ~ html,
  .switch-btn:checked ~ div {
    filter:invert(.85) hue-rotate(180deg);
  }

  .switch-btn:checked ~ div img,
  .switch-btn:checked ~ div XXX{
    filter:invert(1) hue-rotate(180deg) brightness(.9);
  }

  .switch-btn ~ html,
  .switch-btn ~ div {
    background-color:#fff;
    transition:all 200ms;
  }
</style>

「XXX」处可添加其它不需要颜色变化的元素标签。