之前想要给某个陈旧的网页适配黑暗模式…
去查了一圈,查到这些(部分经过修改):

优势

• 可大幅减少耗电量（具体取决于设备的屏幕技术）。
• 为弱视以及对强光敏感的用户提高可视性。
• 让所有人都可以在光线较暗的环境中更轻松地使用设备。

系统兼容情况

• macOS 10.14 引入了 darkmode
• iOS13 2019 年 3 月发布的 iOS13 版本加入了 darkmode
• Android 10 (API 级别 29) 及更高版本中提供深色主题背景
• Windows10 2018.10.10
• 微信最新版支持黑暗模式

可见系统适配情况非常可观。

Html 5适配

CSS 适配

通过媒体查询 @media(prefers-color-scheme: dark) 来适配 prefers-color-scheme 的值有两个 dark 和 light 。

Demo：

body {
  background: #ffffff;
  color: #333;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #000000;
    color: #eee;
  }
}

Javascript 适配

Demo：

if (
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches
) {
  //你要写的黑暗模式下的动作
}

效果不错 (