(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 */
}
小程序 DarkMode主题适配
最新推荐文章于 2022-12-10 16:01:52 发布