小程序 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
    评论
Dark Mode 是一种较新的设计趋势,它可以在不同操作系统或应用程序中自动切换白天或黑夜模式。如果您想禁用Dark Mode并始终使用浅色主题,可以按照以下步骤: 1. 在<head>标签中添加以下元标记: ```html <meta name="color-scheme" content="light"> ``` 2. 在<style>标签中添加以下样式规则: ```html @media (prefers-color-scheme: dark) { body { color: black; background: white; } } ``` 这样设置后,无论用户的操作系统或浏览器是否启用 Dark Mode,都将强制使用浅色主题。 如果您希望您的网站能够自适应 Dark Mode 主题,可以使用 CSS 变量和 JavaScript 来实现。以下是一些示例代码: 1. 使用 CSS 变量 ```css :root { --background-color: white; --text-color: black; } @media (prefers-color-scheme: dark) { :root { --background-color: black; --text-color: white; } } body { background-color: var(--background-color); color: var(--text-color); } ``` 2. 使用 JavaScript ```javascript const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); if (prefersDarkScheme.matches) { document.documentElement.style.setProperty('--background-color', 'black'); document.documentElement.style.setProperty('--text-color', 'white'); } else { document.documentElement.style.setProperty('--background-color', 'white'); document.documentElement.style.setProperty('--text-color', 'black'); } ``` 这些代码将根据用户的操作系统设置,自动切换网站的主题。您可以将 CSS 变量和 JavaScript 代码放在单独的文件中,并在<head>标签中引用它们,以便在整个网站中重用它们。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值