去年给网站加了 dark 模式,使用 js + css 的方式实现,不过当时有两个地方一直没搞清楚,导致存在以下两个问题:
- dark 模式下在网络不畅的情况下会存在刷新出现短暂闪烁的问题(页面加载时先渲染 css,再执行 js);
- 系统切换到另一种模式时界面不能自动切换的(无法触发事件)。
如何设置
这次改用 css 实现,只需要两步,连 js 都用不到,在着手处理前有以下几个关键要素需要了解一下。
-
@media
关键字用于设置 css 规则。
-
prefers-color-scheme
特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。
-
:root
它是一个伪类,表示元素,与 html 选择器相同,但优先级更高,这里我们要用到它的高优先级特性。
-
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 编程,局限性也很明显,只能实现跟随系统的设置,无法实现手动切换,对于一般的博客来说这已经足够了。
跟随系统不好用
@S̆̈ 是不能正常工作么?
@秩秩斯干 不是,是包括我在内很多人并不开暗黑模式。字小反差大眼睛疼。
@S̆̈ 域名感觉很奇怪进去一看原来是中文域名,你评论怎么关闭了!
@秩秩斯干 前一阵有些不正常,最近好了