uni-app 再次确认，android设置自动启用深色模式时始终仅能取得light

uni-app 再次确认，android设置自动启用深色模式时始终仅能取得light

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：

  • 以官方的hello-darkmode示例工程为例。
  • 打开android系统深色模式的自动启用，并同时直接把深色模式启用。

预期结果：

  • 取值应为dark

实际结果：

  • 取值实为light

bug描述：

【真机调试或正式包均可重现】OS设置自动启用深色模式，当系统进入到深色模式（包括到达时间自动进入 或 在自动启用深色模式的同时手动开启），此时无论是在挨app onLaunch时通过getSystemInfoSync()取得的theme，或是 uni.onThemeChange 取得的theme，始终为light。

Image 1 Image 2


更多关于uni-app 再次确认，android设置自动启用深色模式时始终仅能取得light的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 再次确认，android设置自动启用深色模式时始终仅能取得light的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，处理Android设备的深色模式（Dark Mode）确实需要一些特定的配置和代码。如果你发现你的应用在Android设备设置为自动启用深色模式时始终只能取得light模式，可能是因为在配置或代码中缺少了某些处理。以下是一个示例，展示如何在uni-app中处理深色模式，确保应用能够正确响应系统的深色模式设置。

步骤 1: 修改manifest.json

首先，确保在manifest.json中配置了应用的主题支持：

{
  "mp-weixin": { // 或者其他平台配置
    "appid": "your-app-id",
    // 其他配置...
    "usingComponents": true,
    "permission": {},
    "window": {
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "uni-app",
      "navigationBarBackgroundColor": "#FFFFFF",
      "backgroundColor": "#FFFFFF",
      "backgroundTextStyle": "light" // 设置为'dark'可以支持深色模式背景文字颜色
    }
  },
  // 全局配置
  "globalStyle": {
    "navigationBarTextStyle": "auto", // 'auto' 表示根据系统主题自动切换
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#00000000", // 透明色，让系统主题色生效
    "backgroundColor": "#00000000" // 同样设置为透明
  }
}

步骤 2: 监听系统主题变化

在App.vue中，使用onThemeChange事件监听系统主题的变化：

<script>
export default {
  onLaunch() {
    // 监听系统主题变化
    uni.getSystemInfo({
      success: (res) => {
        if (res.theme === 'dark') {
          this.applyDarkMode();
        } else {
          this.applyLightMode();
        }
      }
    });

    uni.onThemeChange((res) => {
      if (res.theme === 'dark') {
        this.applyDarkMode();
      } else {
        this.applyLightMode();
      }
    });
  },
  methods: {
    applyDarkMode() {
      // 切换为深色模式的样式
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#000000'
      });
      // 其他深色模式相关的样式调整
    },
    applyLightMode() {
      // 切换为浅色模式的样式
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
      });
      // 其他浅色模式相关的样式调整
    }
  }
};
</script>

结论

通过上述配置和代码，uni-app应该能够正确响应Android设备的深色模式设置。确保manifest.json中的全局样式配置为auto，并在App.vue中监听和处理onThemeChange事件，以实现深色模式和浅色模式的自动切换。这样，当用户在Android设备上设置自动启用深色模式时，你的应用就能正确地根据系统主题进行适配。

回到顶部