微信小程序自适应深色主题DarkMode源码

darkmode就是深色主题，也称为黑色主题。这个是系统级别的主题，2020年的时候微信开始支持darkmode，随后微信小程序也开始适配了darkmode，在深色主题模式下，微信小程序会自动根据当前主题要做对应的样式适配。这样能给用户最好的体验。
简单来讲实现的效果就是如下的动图（点击图片查看动图）：

微信小程序的深色/浅色自动适配需要做的工作：
1、app.json里面添加darkmode的支持配置
相关配置代码如下：

1.   "darkmode": true,
2.   "themeLocation": "theme.json",
3.   "window": {
4.     "backgroundTextStyle": "@backgroundTextStyle",
5.     "navigationBarBackgroundColor": "@navBackgroundColor",
6.     "navigationBarTitleText": "天下码农-码农天下",
7.     "navigationBarTextStyle": "@navTextStyle"
8.   },

复制代码

第一行表示本小程序自动darkmde的适配，第二行，指定适配文件为theme.json
window里面也新增了相关配置为「变量格式」的配置的值，以@开头的为变量
2、新增皮肤配置文件theme.json
1里面用的这些变量咱们定义在theme.json里面，下面是完整的theme.json文件：

1. {
2.   "light": {
3.     "navBackgroundColor": "#4cb4e7",
4.     "navTextStyle": "white",
5.     "backgroundTextStyle":"dark"
6.   },
7.   "dark": {
8.     "navBackgroundColor": "#000000",
9.     "navTextStyle": "white",
10.     "backgroundTextStyle":"light"
11.   }
12. }

复制代码

3、每个页面进行相关的样式适配
比如同一个类，在浅色/深色主题下要适配成不一样的效果，那么可以在wxss为这个样式写两个不同的样式。以.dark-demo 为例
正常的浅色模式下的样式

1.  
2. .dark-demo {
3.         text-align: center;
4.         background-color: #4cb4e7;
5.         padding: 20rpx;
6.         border-radius: 20rpx;
7.         color: white;
8. }

复制代码

效果如下：

而在drakmode下适配如下：

1. @media (prefers-color-scheme: dark) {
2.         .dark-demo {
3.                 background-color: #000000;
4.                 color: white;
5.         }
6. }

复制代码

注意第一行指定了下面样式是在dark主题下才生效。这样当手机主题为深色模式时，dark-demo效果如下：

 

这样就完成了自动适配
相关源码下载（使用方法，解压后导入代码片段）：

微信小程序自适应深色主题(darkmode)的源码_前端开发_天下网吧论坛 - Powered by Discuz!
https://bbs.txwb.com/thread-2083472-1.html