uniapp targetsdkversion35导致黑暗模式失效如何解决？

在uniapp项目中，将targetSdkVersion升级到35后，发现应用的黑暗模式失效了。无论是手动切换系统主题还是跟随系统设置，应用都无法正常切换黑暗模式。请问这是什么原因导致的？应该如何解决这个问题？有没有遇到相同情况的开发者可以分享一下解决方案？

2 回复

在manifest.json中配置"darkmode": true，并确保App.vue中正确使用CSS变量适配暗黑模式。


在 UniApp 中，将 targetSdkVersion 升级到 35（Android 14）可能导致黑暗模式失效，这是因为 Android 14 引入了更严格的夜间模式策略。以下是解决方案：

步骤 1：检查并更新应用配置

确保 manifest.json 中的配置正确：

{
  "app-plus": {
    "distribute": {
      "android": {
        "targetSdkVersion": 35,
        "darkmode": true // 启用黑暗模式支持
      }
    }
  }
}

步骤 2：适配 Android 14 的夜间模式

Android 14 默认强制应用跟随系统主题。如果自定义主题失效，需在 pages.json 中配置全局样式：

{
  "globalStyle": {
    "backgroundColor": "@bgColor",
    "backgroundTextStyle": "@bgTxtStyle",
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationBarTextStyle": "@navTxtStyle"
  },
  "darkmode": true, // 启用黑暗模式
  "themeLocation": "theme.json" // 指向主题文件
}

步骤 3：创建 theme.json 文件

在项目根目录创建 theme.json，定义浅色/深色模式变量：

{
  "light": {
    "bgColor": "#ffffff",
    "bgTxtStyle": "dark",
    "navBgColor": "#f8f8f8",
    "navTxtStyle": "black"
  },
  "dark": {
    "bgColor": "#1e1e1e",
    "bgTxtStyle": "light",
    "navBgColor": "#191919",
    "navTxtStyle": "white"
  }
}

步骤 4：检查代码兼容性

  • 避免硬编码颜色值，使用主题变量（如 uni.getSystemInfoSync().theme 动态获取模式）。
  • 在 Vue 文件中通过 CSS 媒体查询适配：
    [@media](/user/media) (prefers-color-scheme: dark) {
  .container { background-color: #1e1e1e; }
}

步骤 5：重新编译并测试

  • 清除项目缓存（如 unpackage 目录），重新运行到 Android 设备。
  • 在系统设置中切换深色/浅色模式，观察应用是否正常响应。

可能的原因

  • targetSdkVersion 35 强制应用继承系统主题：若未正确定义深色样式，会导致界面显示异常。
  • 旧版本 UniApp 兼容性问题：升级 HBuilderX 到最新版本（如 3.8+）以确保支持。

通过以上步骤，黑暗模式应能正常适配。如果问题持续，检查 Android 系统版本或尝试降级 targetSdkVersion 至 33 作为临时方案。

回到顶部