给网页适配黑暗模式(不使用darkmode.js)

大家的板块 tim 的发现
1

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

优势

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

系统兼容情况

  • 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
) {
  //你要写的黑暗模式下的动作
}

效果不错 :joy: