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里面定义的夜间模式,在这个里面可以写你想要夜间模式所有改变的样式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。