CSS实现自适应黑暗模式 | Hlwdy's blog
CSS实现自适应黑暗模式
发表于 2020-07-07 共 480 字
分类于 CSS

许多操作系统和浏览器现在都已经支持黑暗(深色)模式,比如说:

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-colorcolor就会随之改变。

prefers-color-scheme具体有三种状态,如下:

  1. no-preference: 表示系统未得知用户在这方面的选项。在布尔值上下文中,其执行结果为 false。

  2. light: 表示用户已告知系统他们选择使用浅色主题的界面。

  3. 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)

后续可能会有更多的浏览器对此支持。总之,这项媒体特性使得黑暗模式自适应的实现变得非常方便。

筛选文章
类别选择 (分类/标签)
全屏 关闭