项目新增了一个夜间模式的功能,小程序现在也支持这个模式。类似于写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里面定义的夜间模式,在这个里面可以写你想要夜间模式所有改变的样式。