2020-08-31微信小程序暗黑模式（深色模式）

项目新增了一个夜间模式的功能，小程序现在也支持这个模式。类似于写2套css，话不多说，直接上效果和代码图：

---

---

1.开启暗黑模式

第一步：首先在 app.json 中配置 "darkmode": true

2、配置主题文件

在根目录新建主题配置文件 theme.json, 并在 app.json 中配置路径引入

代码如图：

---

theme.json配置文件一共分为两个属性，light 和 dark，分别正常模式和暗黑模式。

必须存在 light 和 dark 两个属性，里层命名自定义，没有严格要求。

theme.json 示例如下（仅供参考）：

---

3、在app.json中应用配置属性

在配置属性以 @开头拼接theme.json中自定义的名字写入配置，示例如下：

---

配置完些，接着手机开启暗黑模式（深色模式）后，小程序会根据你配置的颜色进行转换。

4、wxss样式适配暗黑模式

wxss中，支持通过媒体查询prefers-color-scheme适配不同主题。

@media (prefers-color-scheme: dark)里面的dark就是我们在thrme.josn里面定义的夜间模式，在这个里面可以写你想要夜间模式所有改变的样式。