css 适配暗黑模式

自从苹果支持暗黑模式后，各个 APP 网站都支持暗黑模式，之前很多都是 js 手动切换模式，其实纯 css 媒体特性也能完全适配

prefers-color-scheme

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

语法

• no-preference 表示系统未知用户在这方面的选项。
• light 表示系统选择使用浅色主题的界面。
• dark 表示系统选择使用暗色主题的界面。

例子

<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代码;
}

兼容性

好用是好用 ，如果考虑兼容性 就需要注意了（我是不考虑兼容性）