uni-app切换手机系统深色模式时uni.onThemeChange和onThemeChange均不触发

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app切换手机系统深色模式时uni.onThemeChange和onThemeChange均不触发

示例代码：

<script>
export default {
onLaunch: function() {
console.log('App Launch')
uni.onThemeChange(res => {
console.log('主题变化333333', res);
})
},
onThemeChange(res) {
console.log('主题变化2222', res);
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>

操作步骤：

uni.onThemeChange写在App.vue文件onLaunch生命周期里面，onThemeChange也写在App.vue文件里面在，真机运行，控制台没有任何输出内容

预期结果：

切换手机系统里面的深色模式uni.onThemeChange这个api和onThemeChange可以触发

实际结果：

切换手机系统里面的深色模式uni.onThemeChange这个api和onThemeChange不触发

bug描述：

切换手机系统里面的深色模式uni.onThemeChange这个api和onThemeChange均未触发，uni.onThemeChange写在App.vue文件onLaunch生命周期在，onThemeChange也写在App.vue文件里面在。


| 信息类型           | 信息内容         |
|-------------------|----------------|
| 产品分类           | uniapp/App      |
| PC开发环境操作系统 | Windows         |
| PC操作系统版本     | win11           |
| HBuilderX类型      | 正式            |
| HBuilderX版本      | 4.17            |
| 手机系统           | Android         |
| 手机系统版本       | Android 13      |
| 手机厂商           | 小米            |
| 手机机型           | PHK110          |
| 页面类型           | vue             |
| Vue版本            | vue2            |
| 打包方式           | 云端            |
| 项目创建方式       | HBuilderX       |

Harmonyos Next教程
14 回复

遇到了同样问题，请问解决了吗？


没有，我也不知道为啥

同样问题，请问解决了没？

没有啊 哥 你呢 ，我是之前还好好的

回复 旧时光: 我说第一次用这个，一点反应也没有

回复 4***@qq.com: 你的manifest.json里面配置了吗

现在这个问题解决了嘛，我也遇到了

没有，怀疑是官方的bug

现在解决了吗？我也遇到了

没有

这样写android下能够切换，但是写在onThemeChange下控制没有反应。console也打印不出log

<script setup lang="ts"> plus.nativeUI.setUIStyle("auto")

系统崩了啊，现在啥都用不了。

要配置 darkmode:true，onThemeChange才能监听得到

在uni-app中，当系统切换到深色模式时，uni.onThemeChange 和 onThemeChange 不触发通常是由于事件监听未正确设置或存在某些兼容性问题。下面我将提供一个完整的代码示例，确保你能够正确监听系统主题变化事件。

首先，确保你的uni-app项目已经正确初始化，并且你正在使用的uni-app版本支持主题变化监听。然后，你可以按照以下步骤进行：

  1. 在App.vue中监听主题变化：
<template>
  <App />
</template>

<script>
export default {
  onLaunch: function () {
    // 监听系统主题变化
    if (uni.onThemeChange) {
      uni.onThemeChange((res) => {
        console.log('系统主题变化', res.systemTheme);
        // 根据系统主题更新应用样式
        if (res.systemTheme === 'dark') {
          // 切换到深色模式样式
          document.documentElement.setAttribute('data-theme', 'dark');
        } else {
          // 切换到浅色模式样式
          document.documentElement.setAttribute('data-theme', 'light');
        }
      });
    } else {
      console.warn('当前uni-app版本不支持uni.onThemeChange');
    }
  },
  // 其他生命周期函数...
};
</script>

<style>
/* 这里可以根据data-theme属性设置全局样式 */
[data-theme="dark"] {
  --background-color: #000;
  --text-color: #fff;
}
[data-theme="light"] {
  --background-color: #fff;
  --text-color: #000;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
</style>

  1. 确保样式支持CSS变量： 在上面的代码中，我们使用了CSS变量来根据主题切换样式。确保你的样式表中使用了这些变量，以便在主题变化时能够正确应用。

  2. 测试： 在真机上运行你的uni-app项目，并尝试切换手机的系统深色模式。观察控制台输出和页面样式的变化，确认事件是否被正确触发和应用。

如果上述步骤仍然无法解决问题，请检查以下几点：

  • 确认你的uni-app版本是否支持uni.onThemeChange。
  • 检查是否有其他代码或插件干扰了事件监听。
  • 尝试在不同的设备和操作系统版本上进行测试，以排除特定环境的兼容性问题。

以上代码提供了一个基本的框架，用于在uni-app中监听和处理系统主题变化。希望这能帮助你解决问题。

回到顶部