快速为你的网站添加暗黑模式

现如今手机和电脑等设备无处不在，随时随地都有屏幕伴随着我们的工作与生活。在很多场景下，暗黑模式都有助于我们更轻松地浏览内容，譬如长时间在电脑前工作，睡前的“玩一会手机”。为自己的网站添加暗黑模式也比较简单，只需要几行 ​​css​​ 足以搞定。

话不多说，我们开始吧

在现代浏览器中，使用 ​​prefers-color-scheme​​ CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

语法

• no-preference表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。
• light表示用户已告知系统他们选择使用浅色主题的界面。
• dark表示用户已告知系统他们选择使用暗色主题的界面。

具体浏览器兼容性如下，在如今的高版本浏览器中兼容性还算可以。

@media (prefers-color-scheme: dark) {
  /* 暗黑模式下的样式处理 */
}
复制代码

然后，接下来就该使用css黑魔法进行加成，把网页中黑色变白，白色变黑。

上黑魔法:

@media (prefers-color-scheme: dark) {
  /* 暗黑模式下的样式处理 */
  html {
    filter: invert(1) hue-rotate(180deg);
  }
}
复制代码

瞬间变为暗黑模式有没有，但是中间还有点小问题，后面在解决。

先看看这行 ​​css​​ 的含义。

​​invert​​ : 反转配色。黑色变为白色，白色变为黑色，所有颜色都是如此。值为0到1。

​​hue-rotate​​ : 为色相调整，来个例子：

​​hue-rotate​​ 滤镜除了支持 ​​deg​​ ，还支持其它 ​​CSS3​​ 单位，如圈数 ​​turn​​ 以及弧度 ​​rad​​ 等。

hue-rotate(90deg)   /* 90度旋转 */
hue-rotate(.5turn)       /* 180度旋转 */
hue-rotate(3.142rad)     /* 3.142弧度旋转，近似一圈，也就是360度 */
复制代码

在上面中，其实 ​​img​​ 不需要进行翻转，保留原有的样子即可。修改代码如下。

@media (prefers-color-scheme: dark) {
  html, img { 
      filter: invert(1) hue-rotate(180deg);
  }
}
复制代码

这下就正常了。

在手机上试试效果：

最后说两句：

这种方案适合偏展示性的网站，页面元素简单，没有复杂动效的网站。该效果虽说简单几行代码实现，在生产环境使用还需谨慎。在页面元素复杂的情况下，这种方式就不推荐了！还是一个一个页面进行慢慢适配吧。

另外，我也开通了个人公众号，欢迎关注！！！

禾寸 欢迎关注！喜欢就坚持吧！