css 适配暗黑模式
码上世界 / Dec 04, 2020 / 1 min read / 190
自从苹果支持暗黑模式后,各个 APP 网站都支持暗黑模式,之前很多都是 js 手动切换模式,其实纯 css 媒体特性也能完全适配

prefers-color-scheme

prefers-color-scheme 是 CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

语法

例子

<div class="day">Day</div>
<div class="night">Night</div>
@media (prefers-color-scheme: dark) {
  .day {
    background: #333;
    color: white;
  }
  .night {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day {
    background: white;
    color: #555;
  }
  .night {
    background: #eee;
    color: black;
  }
}

实际使用

正常模式的下 我们正常写 css 代码 , 如果需要根据系统显示暗黑模式
即可添加如下代码

... // 正常css 代码
@media (prefers-color-scheme: dark) {
  ... //暗黑模式css代码;
}

兼容性

好用是好用 ,如果考虑兼容性 就需要注意了(我是不考虑兼容性)

prefers-color-scheme 兼容性