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

2,791 阅读2分钟

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

微信图片_20201212103518.png

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

先看看这行 css 的含义。

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

invert

hue-rotate : 为色相调整,来个例子:

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

这下就正常了。 微信截图_20201212111925.png

在手机上试试效果:

微信图片_20201212093213.jpg

最后说两句:

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

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

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