神奇的 @media (prefers-color-scheme: dark)

夜间模式已经实现很久了,当初有人跟我讲,可以增加一个按时间切换的功能。

直到我在无意间查看 Reabble 阅读器的 CSS 样式时,发现了 @media (prefers-color-scheme: dark) 选择器。

来自prefers-color-scheme - CSS(层叠样式表) | MDN
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

简而言之,就是可以实现随系统(或浏览器)的深、浅色模式设置,改变网页配色。

我觉得这是比按时间切换更好的一个实现,跟随系统设置比跟随时间更加人性化一些,毕竟还有我这种,白天开深色,晚上开浅色的异类(逃)

神奇的 @media (prefers-color-scheme: dark)

https://www.imaegoo.com/2020/css-prefers-color-scheme/

作者

iMaeGoo

发布于

2020-08-03

更新于

2020-08-06

许可协议

CC BY 4.0