项目新增了一个夜间模式的功能,小程序现在也支持这个模式。类似于写2套css,话不多说,直接上效果和代码图:2020-08-31微信小程序暗黑模式(深色模式)
2020-08-31微信小程序暗黑模式(深色模式)
2020-08-31微信小程序暗黑模式(深色模式)
2020-08-31微信小程序暗黑模式(深色模式)
1.开启暗黑模式

第一步:首先在 app.json 中配置 “darkmode”: true

2、配置主题文件

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

代码如图:

2020-08-31微信小程序暗黑模式(深色模式)
theme.json配置文件一共分为两个属性,light 和 dark,分别正常模式和暗黑模式。

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

theme.json 示例如下(仅供参考):2020-08-31微信小程序暗黑模式(深色模式)
3、在app.json中应用配置属性

在配置属性以 @开头拼接theme.json中自定义的名字写入配置,示例如下:2020-08-31微信小程序暗黑模式(深色模式)
配置完些,接着手机开启暗黑模式(深色模式)后,小程序会根据你配置的颜色进行转换。

4、wxss样式适配暗黑模式

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

@media (prefers-color-scheme: dark)里面的dark就是我们在thrme.josn里面定义的夜间模式,在这个里面可以写你想要夜间模式所有改变的样式。
2020-08-31微信小程序暗黑模式(深色模式)

相关文章:

  • 2021-06-29
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-15
  • 2021-10-12
  • 2021-06-09
猜你喜欢
  • 2021-12-02
  • 2021-05-04
  • 2021-10-30
  • 2021-05-29
  • 2021-08-20
  • 2021-08-29
  • 2021-06-21
相关资源
相似解决方案