uniapp适配暗黑模式配置plus.nativeUI.setUIStyle适配DarkMode配置

uniapp适配暗黑模式配置

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`配置

json 复制代码

"app-plus" : {
    "darkmode": true,
    "themeLocation": "theme.json", // 如果 theme.json 在根目录可省略
    "safearea": {// 适配ios安全线背景色
        "background": "#ffffff",
        "backgroundDark": "#1F1F1F",
        "bottom": {
            "offset": "auto"
        }
    },
 }

`theme.json`配置

可复制文件自行修改

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配置不同的图片，然后通过 @这种方式引入即可。

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

html 复制代码

<template>
	<button type="text" class="change-theme" @click="changeTheme('dark')">切换暗黑模式</button>
	<button type="text" class="change-theme" @click="changeTheme('light')">切换明亮模式</button>
<templaate>
<script setup>
// 切换用plus实现
function changeTheme(theme) {
  //暗黑模式
  // #ifdef APP
  console.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 节点

json 复制代码

"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组件，就需要再写样式进行适配。

适配样式，只做参考，根据实际情况进行修改

css 复制代码

@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

uniapp适配暗黑模式配置plus.nativeUI.setUIStyle适配DarkMode配置