小程序 DarkMode主题适配

(1)开启适配
	在app.json中配置darkmode为true,即表示当前小程序已适配 DarkMode,所有基础组件均会根据系统主题展示不同的默认样式,navigation bar和tab bar也会根据下面的配置自动切换。
	{
		"darkmode":true
	}

(2)指定主题下自定义设置
	1、在app.json中配置themeLocation,指定变量配置文件theme.json路径
	    如:在根目录下新增theme.json,需要配置"themeLocation":"theme.json"
	    
	2、在theme.json中定义相关变量
		{
		  "light": {	浅色模式
		    "navBgColor": "#f6f6f6",		变量名自定义
		    "navTxtStyle": "black"
		  },
		  "dark": { 	深色模式
		    "navBgColor": "#191919",
		    "navTxtStyle": "white"
		  }
		}
		
	3、完成定义后,可在全局配置或页面配置的相关属性中以@开头引用
			
		全局配置
		{
		  "window": {
		    "navigationBarBackgroundColor": "@navBgColor",
		    "navigationBarTextStyle": "@navTxtStyle"
		  }
		}
		页面配置
		{
		  "navigationBarBackgroundColor": "@navBgColor",
		  "navigationBarTextStyle": "@navTxtStyle"
		}
		
		支持配置的熟悉
			全局配置的window属性与页面配置下的属性
				navigationBarBackgroundColor
				navigationBarTextStyle
				backgroundColor
				backgroundTextStyle
				backgroundColorTop
				backgroundColorBottom
			全局配置window.tabBar的属性
				color
				selectedColor
				backgroundColor
				borderStyle
				list
					iconPath
					selectedIconPath


(3)获取当前系统主题
	如果app.json中声明了"darkmode":true,wx.getSystemInfo或wx.getSystemInfoSync的返回结果中会包含theme属性,值为light或dark

(4)监听主题切换事件
	方式一:
		在App()中传入onThemeChange回调方法,主题切换时会触发此回调
		
	方式二:
		通过wx.onThemeChange监听主题变化,wx.offThemeChange取消监听

(5)通过媒体查询的方式适配
	无论是否配置"darkmode": true,媒体查询都将生效。
	
	@media (prefers-color-scheme: dark) {	/* DarkMode 下的样式 */
	    .some-background {
	        background: #1b1b1b;
	    }
	    .some-text {
	        color: #ffffff;
	    }
	    /* DarkMode 下的样式 end */
	}
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值