2019-09-20.md

Dark Mode 适配

今天苹果正式推送了 iOS 13 的更新，其中「暗色模式」算是比较吸引人的 feature 之一，其实暗色主题早就在 macOS 中上线了，许多第三方原生 APP 也跟上潮流推出了暗色版本。

我很少用暗色模式了，因为 macbook 屏幕实在太反光了

而 WebAPP 对暗色模式的支持是比较滞后，主要是因为 macbook 是桌面端，对大部分移动优先的公司，优先级没那么高。因此 iOS 13 的更新可能会让一些公司开始重视暗色模式的适配。

Old School

网页换肤的技术在我刚开始学习前端的时候就已经十分成熟，使用换肤技术实现暗色模式适配一般分为之下几个步骤：

1. 在网页显示一个 Switch 开关给用户选择是否使用暗色主题（Ligth/Dark）
2. 监听开关值的变化，然后在 body 上新增一个 class（.dark-mode），对应的 CSS 可以是

     body {
     	color: black;
     }
     
     .dark-mode body {
     	color: #FFF;
     }

3. 把用户选择记录到本地存储（cookie/localStorage）中
4. 下次刷新页面，优先使用本地存储的配置

这样可以把选择权留给用户，但反过来说也有两个缺点：

1. 除了写样式，还需要更多的工作
2. 无法像原生 APP 那样根据系统配置自动切换亮/暗

New Way

为了解决以上两个问题，浏览器提供了新的媒体查询，以实现更优雅的适配方案

  body {
  	color: black;
  }
  
  @media (prefers-color-scheme: drak) {
  	body: {
  		color: #FFF;
  	}
  }

有了这个 feature，很多 WebAPP 又可以继续装 Native 了