iOS 13 之后，暗黑模式从“可选项”变成了“默认语境”。OLED 屏幕让它更省电，设计得当也能在夜里更舒适。真正舒服的暗黑模式不是“夜间皮肤”，而是与系统同步的呼吸。

那么前端该如何与系统保持一致？答案其实很简单：媒体查询。

从时间判断到系统判断

早些年，常见做法是通过本地时间或服务器时间判断是否切换暗黑样式。这种方法直观，但也粗暴。无论设备是否支持暗黑模式，最终都会被“硬切”成夜间版本，尤其是在 app 内嵌页面里，往往与宿主应用的视觉节奏脱节。

如果我们希望“跟随系统”，就应该把判断权交给系统本身。

prefers-color-scheme

媒体查询 prefers-color-scheme 专门用于检测系统主题偏好，值包括 no-preference、light 和 dark。

/* light mode */
@media (prefers-color-scheme: light) {
  body {
    background: #f0f0f0;
  }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background: #3e3e3e;
  }
}

如果不方便从 CSS 层面改造，也可以在 JavaScript 里判断媒体查询字符串：

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // dark mode
}

碎碎念

这篇文章写得有点晚，不过想到微信到现在还没支持暗黑模式，好像又不算太晚。