uniapp 安卓如何切换深色模式

在uniapp开发中，如何让安卓应用实现深色模式切换？目前尝试了通过CSS媒体查询和uni.setNavigationBarColor调整导航栏颜色，但部分页面样式无法自动适配。求教具体实现方案，是否需要配合原生插件或特殊配置？最好能提供完整示例代码。

2 回复

在uniapp中，可通过监听系统主题变化实现深色模式切换。使用uni.onThemeChange监听系统主题变化，并在回调中更新应用样式。也可通过uni.setTabBarStyle等API调整底部导航栏颜色。


在 UniApp 中，为 Android 应用切换深色模式可以通过以下步骤实现：

1. 检测系统深色模式状态

使用 uni.getSystemInfoSync() 获取系统主题信息，判断是否为深色模式。

const systemInfo = uni.getSystemInfoSync();
const isDarkMode = systemInfo.theme === 'dark'; // 部分平台支持 theme 字段

注意：Android 端可能需要依赖 HBuilderX 3.6+ 版本，并确保 manifest.json 配置支持深色主题。

2. 动态切换应用主题

  • 方法一：通过 CSS 变量或类名控制 在 App.vue 或页面样式中定义浅色/深色主题样式，通过动态类名或 CSS 变量切换：

    /* 深色模式样式 */
.dark-mode {
  background-color: #000;
  color: #fff;
}

    在页面中监听主题变化并应用类名：

    export default {
  data() {
    return {
      isDark: false
    };
  },
  onLoad() {
    this.checkTheme();
  },
  methods: {
    checkTheme() {
      // 检测系统主题
      const systemInfo = uni.getSystemInfoSync();
      this.isDark = systemInfo.theme === 'dark';
    },
    toggleTheme() {
      this.isDark = !this.isDark;
      // 手动切换主题（需自行维护状态）
    }
  }
};

  • 方法二：使用原生插件（如需强制切换系统主题） 若需直接修改 Android 系统级深色模式，可通过 UniApp 原生插件调用 Android API（需开发自定义插件）。

3. 配置 manifest.json

在 manifest.json 的 app-plus 节点下配置 Android 深色模式支持：

"app-plus": {
  "android": {
    "darkmode": true // 启用深色模式适配
  }
}

4. 注意事项

  • 兼容性：深色模式支持需 HBuilderX 3.6+ 并确保手机系统为 Android 10+。
  • 样式覆盖：通过 CSS 媒体查询 prefers-color-scheme: dark 可自动适配，但动态切换需自行实现状态管理。
  • 状态持久化：建议使用 uni.setStorageSync 保存用户选择的主题模式。

示例代码（简单切换）

<template>
  <view :class="isDark ? 'dark-theme' : 'light-theme'">
    <button @click="toggleTheme">切换主题</button>
  </view>
</template>

<script>
export default {
  data() {
    return { isDark: false };
  },
  methods: {
    toggleTheme() {
      this.isDark = !this.isDark;
    }
  }
};
</script>

<style>
.light-theme { background: #fff; color: #000; }
.dark-theme { background: #000; color: #fff; }
</style>

通过以上方法，即可在 UniApp 中实现 Android 端的深色模式切换。

回到顶部