杭州 网站定制,iis建立网站,青岛物流公司网站建设,北京集团 网站建设uniapp适配暗黑模式配置 目录 uniapp适配暗黑模式配置setUIStyleDarkMode 适配app-plus manifest.json配置theme.json配置pages.json配置页面切换代码实现同步手机暗黑配置额外适配 参考官方文档#xff1a;https://uniapp.dcloud.net.cn/tutorial/darkmode.html
主要用到api…uniapp适配暗黑模式配置 目录 uniapp适配暗黑模式配置setUIStyleDarkMode 适配app-plus manifest.json配置theme.json配置pages.json配置页面切换代码实现同步手机暗黑配置额外适配 参考官方文档https://uniapp.dcloud.net.cn/tutorial/darkmode.html
主要用到apisetUIStyle
setUIStyle
设置原生界面样式暗黑模式plus.nativeUI.setUIStyle(style); 说明 iOS13系统支持暗黑模式可设置原生界面的外观样式为浅色或深色暗黑模式。 即使应用没有设置全局开启暗黑模式也可以调用此方法强制设置原生界面外观样式。 HBuilderX2.6.3版本支持并且要求iOS13及以上系统。 参数 style: ( String ) 必选 原生界面样式 可取值 “light” - 浅色外观样式 “dark” - 深色外观样式暗黑模式 “auto” - 根据系统外观样式自动调整应用需全局开启暗黑模式”参考https://ask.dcloud.net.cn/article/36995
DarkMode 适配
app-plus
在 manifest.json - app-plus 中配置
配置 darkmode:true 配置 themeLocation指定变量配置文件 theme.json 路径例如在根目录下新增 theme.json需要配置 themeLocation:theme.json 在 theme.json 中定义相关变量 在 pages.json 中以开头引用变量 整体配置
app-plus : {darkmode : true,themeLocation : theme.json // 如果 theme.json 在根目录可省略}实现效果
manifest.json配置
app-plus : {darkmode: true,themeLocation: theme.json, // 如果 theme.json 在根目录可省略safearea: {// 适配ios安全线背景色background: #ffffff,backgroundDark: #1F1F1F,bottom: {offset: auto}},} theme.json配置
可复制文件自行修改
{light: {navigationBarTextStyle: black,navigationBarBackgroundColor: #F7F7F7,backgroundColor: #F7F7F7,tabBarColor: #939393,tabBarSelectedColor: #2979ff,tabBarBorderStyle: black,tabBarBackgroundColor: #ffffff},dark: {navigationBarTextStyle: white,navigationBarBackgroundColor: #1F1F1F,backgroundColor: #1F1F1F,tabBarColor: #cacaca,tabBarSelectedColor: #2979ff,tabBarBorderStyle: white,tabBarBackgroundColor: #1F1F1F}
}
pages.json配置
主要是修改tabbar和globalStyle tabbar的icon也可以通过theme.json配置不同的图片然后通过 这种方式引入即可。
tabBar: {color: tabBarColor,selectedColor: tabBarSelectedColor,borderStyle: tabBarBorderStyle,backgroundColor: tabBarBackgroundColor,fontSize: 11px,iconWidth: 20px,iconHeight: 20px,spacing: 5px,list: [{pagePath: pages/index/index,text: 首页,iconPath: static/images/tabbar/home.png,selectedIconPath: static/images/tabbar/home_select.png},{pagePath: pages/mine/mine,text: 我的,iconPath: static/images/tabbar/wode.png,selectedIconPath: static/images/tabbar/wode_select.png}]},globalStyle: {navigationBarTextStyle: navigationBarTextStyle,navigationBarTitleText: uni-app,navigationBarBackgroundColor: navigationBarBackgroundColor,backgroundColor: backgroundColor}页面切换代码实现
mine.vue
templatebutton typetext classchange-theme clickchangeTheme(dark)切换暗黑模式/buttonbutton typetext classchange-theme clickchangeTheme(light)切换明亮模式/button
templaate
script setup
// 切换用plus实现
function changeTheme(theme) {//暗黑模式// #ifdef APPconsole.log(✨file:mine.vue:52✨✨, uni.getSystemInfoSync());plus.nativeUI.setUIStyle(theme)// 此处监听也是监听的的app主题信息不是手机系统的主题uni.onThemeChange(({ theme }) {console.log(onThemeChange, theme)})// #endif
}
/script至此配置手机上点击切换明亮和暗黑是没有问题的都是正常切换 但是没办法同步手机系统的设置。
同步手机暗黑配置
在 manifest.json - plus 中配置【注意保存后提交云端打包后生效】
iOS平台在 “plus” - “distribute” - “apple” 节点下添加 defaultTheme 节点Android平台在 “plus” - “distribute” - “google” 节点下添加 defaultNightMode 节点
app-plus : {darkmode : true,themeLocation : theme.json,safearea : {// 安全区域看项目需要,设置none需要页面内自行适配background : #ffffff,backgroundDark : #1F1F1F,bottom : {offset : auto // auto | none}},distribute : {apple : {//UIUserInterfaceStyle: Automatic, //不推荐使用设置light或dark后将无法跟随系统defaultTheme : auto // HBuilderX 3.6.10及以上版本支持 },google : {defaultNightMode : auto // light | dark | auto}}
},进行上面配置后打包自定义基座然后运行到手机查看效果。 切换手机系统暗黑模式app会自动同步设置。
注 如果手动调用plus.nativeUI.setUIStyle()设置了’dark’或者’light’则不会跟随系统 再次调用plus.nativeUI.setUIStyle(auto)及设置成自动后可再次跟随系统变化。
额外适配
有些页面可能会出现无法适配的问题因为自己写的样式这是背景色白色了需要自行进行适配
比如像下面这种样式我用的uni-list组件就需要再写样式进行适配。 适配样式只做参考根据实际情况进行修改
media (prefers-color-scheme: dark) {.content {background-color: rgb(31, 31, 31);}::v-deep .uni-list {background-color: rgb(31, 31, 31);}::v-deep .uni-list-item {background-color: rgb(31, 31, 31) !important;}::v-deep .uni-list-item__content-title {color: #999999 !important;}
}适配后的样式 兼容 iOS 13、Android 10设备上才支持
参考资料 https://ask.dcloud.net.cn/article/36995 https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.setUIStyle https://uniapp.dcloud.net.cn/tutorial/darkmode.html#open-darkmode
