HarmonyOS 鸿蒙Next应用如何监听系统主题变化？

HarmonyOS 鸿蒙Next应用如何监听系统主题变化？ 鸿蒙系统支持主题切换，应用需要监听主题变化并实时更新界面，本文介绍如何使用 uni.onThemeChange 监听主题变化事件。

4 回复

经验证在HBuilderX 4.87上，uni.onThemeChange可以正常监听到系统深浅模式切换，uni.getSystemInfoSync().osTheme可以正常获取到系统主题，UTSHarmony.onOsThemeChangek同样可以正常监听系统深浅模式切换

【解决方案】

一、深色模式适配。 uni-app在非HarmonyOS平台可在manifest.json -> app-plus配置darkmode:true深色模式，见DarkMode适配指南。

/* 5+App特有相关 */
"app-plus" : {
    "darkmode" : true,
    "usingComponents" : true,
    "nvueStyleCompiler" : "uni-app",
    "compilerVersion" : 3,
    "splashscreen" : {
        "alwaysShowBeforeRender" : true,
        "waiting" : true,
        "autoclose" : true,
        "delay" : 0
    },
    /* 模块配置 */
    "modules" : {},
    /* 应用发布信息 */
    "distribute" : {
        /* android打包配置 */
        "android" : {},
        /* ios打包配置 */
        "ios" : {},
        /* SDK配置 */
        "sdkConfigs" : {}
    }
},

HarmonyOS开发中不会读取app-plus下配置的选项，在app-harmony节点下可以设置HarmonyOS参数。uni-app在HarmonyOS平台上设置深色模式的步骤如下：

  1. 在manifest.json中开启深色模式。
"app-harmony" : {
    "darkmode": true,
  1. 在App.vue的style标签下，通过媒体查询定义深色模式样式，示例代码如下：
<style type="text/css">
  @media (prefers-color-scheme: dark) {
    .contentCss{ background:  #000000; color: white; }
    .hrefCss{ color: #317AF7; }
  }
</style>

二、监听深色模式变化。

  1. Vue中可以通过uni.onThemeChange（链接来源于uniapp）监听系统主题，uni.offThemeChange取消监听系统主题。此接口从HBuilderX 4.71开始支持，HBuilderX 4.81版本修复了修复了运行期间onThemeChange不触发的问题。
const callback = (res) => {
  console.info(res.theme);
}
uni.onThemeChange(callback);
  1. UTS插件中可以通过UTSHarmony.onOsThemeChange监听系统主题，UTSHarmony.offOsThemeChange取消监听系统主题。
export const onOsThemeChange = (callback : any) => {
  if (typeof callback === 'function') {
    UTSHarmony.onOsThemeChange((res) => {
      console.info(res.osTheme);
      callback(res.osTheme);
    });
  }
};

三、获取系统主题。

  1. Vue中可以通过uni.getSystemInfoSync获取系统主题。
getSystemTheme() {
  const theme = uni.getSystemInfoSync().osTheme;
  console.info(theme)
}
  1. UTS插件中可以通过UTSHarmony.getOsTheme获取系统主题。
export const getSystemThemeByUTS = () => {
  const theme = UTSHarmony.getOsTheme();
  console.info(theme);
  return theme.toString();
}

（以上链接均来源于uniapp）

更多关于HarmonyOS 鸿蒙Next应用如何监听系统主题变化？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


您好楼主，本文呢？

在HarmonyOS Next中，监听系统主题变化需使用themeManager模块。通过themeManager.on('themeChange')注册监听器，回调函数中可获取当前主题模式（如dark或light）。示例代码：

import themeManager from '@ohos.themeManager';
themeManager.on('themeChange', (theme) => {
  console.log('Current theme:', theme);
});

监听后，应用界面可根据主题模式动态调整资源。

在HarmonyOS Next中，监听系统主题变化是应用适配动态主题的关键。虽然您提到的uni.onThemeChange是跨平台框架（如UniApp）的API，但HarmonyOS Next原生开发提供了更直接的系统级支持。

核心方法是使用UIAbility的onConfigurationUpdate回调： 当系统主题（如浅色/深色模式）、语言等配置发生变更时，系统会主动调用此回调。您可以在该回调中获取最新的主题配置并更新UI。

基本步骤：

  1. 在UIAbility的onConfigurationUpdate中接收配置变更。
  2. 使用Configuration对象的colorMode属性判断当前主题（ColorMode.LIGHT或ColorMode.DARK）。
  3. 通知UI组件（如通过postTask或事件总线）更新资源引用，系统会自动匹配resources目录下对应的主题资源（如element/color.json中定义的$color:background_dark等动态颜色）。

优势：

  • 原生支持：直接响应系统级配置更新，无需依赖第三方框架。
  • 资源自动匹配：配合ArkUI的动态颜色资源，大部分场景下UI可自动适配，只需在关键处重新应用资源变量。
  • 生命周期整合：与Ability生命周期绑定，管理更规范。

注意：

  • 若使用ArkTS声明式开发，推荐使用@StorageLink或@LocalStorageLink绑定动态资源，主题切换时UI会自动刷新。
  • 对于复杂场景，可结合AppStorage存储主题状态，供全局组件访问。

此方案为HarmonyOS Next原生推荐方式，可确保应用主题与系统实时同步。

回到顶部