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

**URL:** <https://meta.appinn.net/t/topic/14822>\
**Category:** tim 的发现\
**Created:** [2020 年3 月 24 日 04:55 UTC](https://meta.appinn.net/t/topic/14822 "2020-03-24T04:55:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![tim1103](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/tim1103/32/5592_2.png) [@tim1103](https://meta.appinn.net/u/tim1103)\
发布日期： [2020 年3 月 24 日 04:55 UTC](https://meta.appinn.net/t/topic/14822/1 "2020-03-24T04:55:32Z")

</div>

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

### 优势

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

### 系统兼容情况

- 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：

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

```

## Javascript 适配

* * *

### Demo：

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

```

效果不错 :joy: