许多操作系统和浏览器现在都已经支持黑暗(深色)模式,比如说:
Chrome自从Chrome 76就开始支持自适应黑暗模式,详细请见:
https://developers.google.cn/web/updates/2019/07/nic76#dark-mode
CSS中的prefers-color-scheme
媒体特性用于检测用户启用了系统的色亮色或者暗色主题
下面的一个例子就是实现了body随浏览器黑暗主题自适应。
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
上面的例子也就是如果启用了深色/浅色模式,background-color
和color
就会随之改变。
prefers-color-scheme
具体有三种状态,如下:
-
no-preference: 表示系统未得知用户在这方面的选项。在布尔值上下文中,其执行结果为 false。
-
light: 表示用户已告知系统他们选择使用浅色主题的界面。
-
dark: 表示用户已告知系统他们选择使用暗色主题的界面。
注:目前,若结果为no-preference
,无法通过此媒体特性获知用户系统是否支持设置主题色,可能用户将其设置为无偏好。出于隐私保护等方面的考虑,用户代理(UA)也可能在一些情况下在浏览器内部将其设置为no-preference
。
目前,支持此媒体特性的浏览器有PC的Chrome(76)、Edge(79)、Firefox(67)、Opera(62)、Safari(12.1)
移动端的Android webview(76)、Chrome for Android(76)、Opera for Android(54)、Safari on iOS(13)
后续可能会有更多的浏览器对此支持。总之,这项媒体特性使得黑暗模式自适应的实现变得非常方便。