uniapp如何实现鸿蒙深色模式适配

在uniapp中如何实现鸿蒙系统的深色模式适配？目前项目需要同时兼容鸿蒙和其他安卓设备，但发现鸿蒙的深色模式切换与常规的媒体查询方法不太一致。有没有具体的实现方案或示例代码可以参考？希望能包括主题监听、样式切换以及状态同步的处理方法。

2 回复

在uniapp中，可通过以下方式适配鸿蒙深色模式：

  1. 使用uni.getSystemInfoSync()获取系统主题
  2. 监听onThemeChange事件
  3. 在CSS中使用媒体查询prefers-color-scheme: dark
  4. 动态切换主题变量

建议使用CSS变量管理主题色，结合条件编译实现鸿蒙平台专属适配。

更多关于uniapp如何实现鸿蒙深色模式适配的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在 UniApp 中实现鸿蒙（HarmonyOS）深色模式适配，主要通过监听系统主题变化和应用主题配置来实现。以下是具体步骤和代码示例：

1. 检测系统主题变化

使用 uni.onThemeChange 监听系统主题切换，并更新应用主题。

// 在 App.vue 的 onLaunch 中监听主题变化
export default {
  onLaunch() {
    // 监听系统主题变化
    uni.onThemeChange((res) => {
      this.theme = res.theme; // 更新主题状态
      this.applyTheme(this.theme);
    });
  },
  methods: {
    applyTheme(theme) {
      // 根据主题设置全局样式或变量
      if (theme === 'dark') {
        // 深色模式样式
        uni.setStorageSync('theme', 'dark');
      } else {
        // 浅色模式样式
        uni.setStorageSync('theme', 'light');
      }
    }
  }
};

2. 设置动态 CSS 变量

在全局 CSS 中定义主题相关变量，通过 JavaScript 动态修改。

/* 在 App.vue 的 style 中定义变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}
.dark {
  --bg-color: #1c1c1e;
  --text-color: #ffffff;
}

在页面中引用变量：

.container {
  background-color: var(--bg-color);
  color: var(--text-color);
}

3. 初始化和应用主题

在应用启动时读取保存的主题或系统主题，并应用对应样式。

// 在 App.vue 的 onLaunch 中初始化主题
onLaunch() {
  const savedTheme = uni.getStorageSync('theme') || 'light';
  this.applyTheme(savedTheme);
  
  // 监听系统主题变化
  uni.onThemeChange((res) => {
    this.applyTheme(res.theme);
  });
}

4. 页面级适配

在页面中使用计算属性或监听主题变化，动态调整样式。

<template>
  <view :class="theme">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light'
    };
  },
  onLoad() {
    this.theme = uni.getStorageSync('theme') || 'light';
  }
};
</script>

注意事项：

  • 兼容性：确保 UniApp 基础库版本支持 uni.onThemeChange（通常需 HBuilderX 3.4+）。
  • 测试：在鸿蒙设备或模拟器上测试深色模式切换效果。
  • 图标和图片：深色模式下可能需要替换为高对比度资源。

通过以上方法，可以灵活适配鸿蒙系统的深色模式，提升用户体验。

回到顶部