当前位置：首页 > news >正文

『uniapp』onThemeChange监听主题样式，动态主题不正确生效，样式被覆盖的坑

news 来源：原创 2025/6/16 8:07:01

问题示例代码

我这个业务场景是在跟随系统主题（深色/浅色模式）的情况下用户在设置中修改了主题后app自动适应主题。

开启了主题监听

			uni.onThemeChange(({theme}) => {console.log('onThemeChange', theme)uni.setStorageSync('sys_theme', theme)if (uni.getStorageSync('theme_isAuto')) {uni.setStorageSync('theme_mode', theme)}})

在onshow中根据读取的主题设置颜色样式

				this.theme_mode = uni.getStorageSync('theme_mode')//设置顶部导航背景颜色this.navbarBackground = {background: this.theme_mode === 'dark' ? this.themeConfig.dark.navBgColor : this.themeConfig.light.navBgColor};//顶部导航字体颜色this.navTxtStyle = this.theme_mode === 'dark' ? this.themeConfig.dark.navTxtStyle : this.themeConfig.light.navTxtStyle;console.log('ok', this.theme)

排查了半天bug最后发现输出日志的结果

'ok', this.theme
'theme_mode', theme

也就是我们的onshow都执行完毕了，onThemeChange才姗姗来迟，当然无法成功渲染页面。

解决思路1（缺点影响显示效果有延迟）

延迟执行，虽然很low，但是一步到位。（我最后才想到这个办法~）最关键的是之前试了没有成功，一直以为不可行，后来发现是因为没有把this.theme_mode = uni.getStorageSync('theme_mode')放到setTimeout里面。

			setTimeout(() => {this.theme_mode = uni.getStorageSync('theme_mode')//设置顶部导航背景颜色this.navbarBackground = {background: this.theme_mode === 'dark' ? this.themeConfig.dark.navBgColor : this.themeConfig.light.navBgColor};//顶部导航字体颜色this.navTxtStyle = this.theme_mode === 'dark' ? this.themeConfig.dark.navTxtStyle : this.themeConfig.light.navTxtStyle;}, 100);

解决思路2——通过路由刷新页面（缺点只适用于部分网页）

本质是用uni.reLaunch 页面跳转，而且会导致你无法跳转回原来的网页

在app.vue的onLaunch中

  onLaunch() {uni.onThemeChange(({ theme }) => {console.log('onThemeChange', theme);// 触发路由刷新this.refreshPageRoute();});},

在app.vue的methods中

// 触发路由刷新的方法
refreshPageRoute() {// 获取当前页面路由路径const pages = getCurrentPages();const currentPage = pages[pages.length - 1];const route = currentPage.route;console.log(`/${route}`); // 注意使用反引号（`）来实现字符串插值// 使用 uni.reLaunch 方法刷新当前页面uni.reLaunch({url: `/${route}`});
}