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

最近暗黑模式成为了潮流，微信小程序也推出了暗黑模式适配，下面来记录一个下适配暗黑模式。

效果图：

一、实现

1、开启暗黑模式

在 app.json 中配置 "darkmode": true

// app.json
{..."darkmode": true
}

2、配置主题文件

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

// app.json
{..."themeLocation": "theme.json"
}

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

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

// theme.json
{"light": {"navBackgroundColor": "#ffffff","navTextStyle": "black"},"dark": {"navBackgroundColor": "#000000","navTextStyle": "white"}
}

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

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

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

// app.json
{..."window": {"navigationBarBackgroundColor": "@navBackgroundColor","navigationBarTitleText": "小书包大梦想","navigationBarTextStyle": "@navTextStyle"},"darkmode": true,"themeLocation": "theme.json"
}

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

4、wxss样式适配暗黑模式

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

如下样式会在正常模式下页面背景为灰白色，暗黑模式下为黑色。

/* 正常模式下应用的样式 */
page{background: #f1f1f1;
}/* 暗黑模式下应用的样式 */
@media (prefers-color-scheme: dark) {page{background: #000000;}
}

微信小程序 - 暗黑模式（深色模式）相关推荐

微信小程序DarkMode，深色模式自适应代码
微信小程序自适配DarkMode 主要是app.js里面配置. { "pages":[ "index/index" ], "darkmode" ...
微信小程序直播卖货模式怎么开启
近几年,微直播再次调整之后,用户目前想要通过微信来观看直播内容以及来进行实时互动都是可以使用小程序来实现的.并且小程序中所具有的无需下载的市场最佳优势,也让运用小程序来做直播带货的商家们以及企业会更具 ...
微信小程序开发的开发模式有哪些？
尽管越来越多的商家开始认识到小程序快速.低成本获客的优势,那么制作小程序有哪几个模式呢?很多人不懂,下面给大家捋捋思路. 不论是新创建的公司,或许具备肯定体量的公司,假如想要做1个微信小程序,就必须要 ...
微信小程序 AES加密ECB模式
微信小程序 AES加密网上大部分是CBC模式,但是java后台用的是ECB模式 ECB模式 js文件下载下载链接 (有好多写着ECB模式,但是下载了还是CBC的,可恨-) 下面展示一下两种模式解密结 ...
微信小程序--P2P消息收发模式（MQTT）
目录前言 js demo 参数 new Paho.Client 创建对象 onConnectionLost 连接丢失回调 onMessageArrived 监听数据 disconnect() : ...
微信小程序通过云开发模式实现注册和登录功能
首先需要进行云环境初始化云环境初始化操作流程可查看前一篇文章 https://blog.csdn.net/weixin_42077074/article/details/113482034 随后,要 ...
对微信小程序的云开发模式的简单理解
基于微信小程序的农产品电商平台精准营销模式创新研究
目前在农产品销售过程出现一个非常严重的问题─滞销, 我们时不时的能在新闻报道看到某地区农产品大量上市却少有客商前来收购, 甚至一度出现大量新鲜的农产品烂在地头无人问津, 被当作垃圾一样扔掉. 客商在 ...
迅速上手：使用taro构建微信小程序基础教程
前言由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病:Taro 是由京东·凹凸实验室(aotu.io)倾力打造的多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使 ...

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

一、实现

微信小程序 - 暗黑模式（深色模式）相关推荐

最新文章

热门文章