uniapp 安卓12 dark模式自动黑白切换如何实现

在uniapp开发中，如何实现安卓12系统下的dark模式自动黑白切换功能？目前遇到dark模式切换时页面颜色无法自动适配的问题，尝试过监听系统主题变化但效果不理想。请问有没有完整的解决方案或示例代码？需要兼容H5和APP端，且不影响原有样式逻辑。

2 回复

在uniapp中，通过监听系统深色模式变化，动态切换主题。使用uni.onThemeChange监听系统主题变化，在回调中更新CSS变量或类名，实现黑白切换。


在 UniApp 中实现安卓 12 的 Dark Mode（深色模式）自动黑白切换，可以通过监听系统主题变化并动态调整应用样式。以下是实现步骤和示例代码：

1. 检测系统主题变化

使用 uni.onThemeChange 监听系统主题切换，并获取当前主题模式。

// 在 App.vue 或页面中监听主题变化
onLoad() {
  // 监听主题变化
  uni.onThemeChange((res) => {
    console.log('当前主题:', res.theme); // 输出 'dark' 或 'light'
    this.applyTheme(res.theme);
  });

  // 初始获取主题
  uni.getTheme({
    success: (res) => {
      this.applyTheme(res.theme);
    }
  });
},
methods: {
  applyTheme(theme) {
    if (theme === 'dark') {
      // 应用深色样式
      document.documentElement.style.setProperty('--bg-color', '#000');
      document.documentElement.style.setProperty('--text-color', '#fff');
    } else {
      // 应用浅色样式
      document.documentElement.style.setProperty('--bg-color', '#fff');
      document.documentElement.style.setProperty('--text-color', '#000');
    }
  }
}

2. 定义 CSS 变量

在全局样式文件（如 App.vue 或 common.css）中定义 CSS 变量，便于动态切换。

/* 定义全局 CSS 变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

/* 应用变量到页面元素 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

3. 页面中使用动态样式

在页面中直接使用 CSS 变量，确保样式随主题自动更新。

<view class="content">
  <text>这是一个示例文本</text>
</view>

<style>
.content {
  background-color: var(--bg-color);
  color: var(--text-color);
}
</style>

4. 兼容性说明

  • uni.onThemeChange 和 uni.getTheme 依赖于 HBuilderX 3.4.10+ 版本，确保使用较新工具。
  • 安卓 12 系统需开启深色模式，并在应用中配置适配。

5. 备选方案（低版本兼容）

如果 UniApp API 不支持，可通过 plus.screen 监听亮度变化（近似模拟）：

plus.screen.getBrightness(function(brightness) {
  // 根据亮度判断（非标准方法，仅作备选）
});

总结

通过监听系统主题变化并动态更新 CSS 变量，即可实现 UniApp 在安卓 12 上的深色模式自动切换。确保测试不同主题下的样式兼容性。

回到顶部