新方法:如何给网站设置 dark 模式

去年给网站加了 dark 模式,使用 js + css 的方式实现,不过当时有两个地方一直没搞清楚,导致存在以下两个问题:

  1. dark 模式下在网络不畅的情况下会存在刷新出现短暂闪烁的问题(页面加载时先渲染 css,再执行 js);
  2. 系统切换到另一种模式时界面不能自动切换的(无法触发事件)。

如何设置

这次改用 css 实现,只需要两步,连 js 都用不到,在着手处理前有以下几个关键要素需要了解一下。

  1. @media关键字

    用于设置 css 规则。

  2. prefers-color-scheme特性

    用于检测用户是否有将系统的主题色设置为亮色或者暗色。

  3. :root

    它是一个伪类,表示元素,与 html 选择器相同,但优先级更高,这里我们要用到它的高优先级特性。

  4. css 的var()函数

    用户动态设置 css 属性值。

第一步

先在样式文件 style.css 里先设置 dark 模式的 css 规则:prefers-color-scheme:dark用于指定这个块下面设置的是适用于 dark 模式的规则,定义了一个变量--background-main设定 dark 模式下的背景颜色。

@media (prefers-color-scheme:dark) {
body{background: var(--background-main: #181819)}
}

第二步

在第一步的代码下追加下面这段样式:
:root{}用于指定在正常模式下的背景样式,并给变量--background-main设置正常模式下的背景颜色;给body{}定义属性background-color,属性值就是刚刚设置的变量--background-main

:root {--background-main: #fff}
body {background-color: var(--background-main)}

这样就完成了,就这么简单。这种方式的优势是设置非常简单,不涉及 js 编程,局限性也很明显,只能实现跟随系统的设置,无法实现手动切换,对于一般的博客来说这已经足够了。

参考:prefers-color-scheme

发表评论

评论(3)

  1. S̆̈ via Safari 15

    跟随系统不好用

    1. 秩秩斯干

      @S̆̈ 是不能正常工作么?

      1. S̆̈ via Safari 16

        @秩秩斯干 不是,是包括我在内很多人并不开暗黑模式。字小反差大眼睛疼。