HarmonyOS鸿蒙Next中app主动设置了setColorMode之后，如何监听手机系统的深色模式

HarmonyOS鸿蒙Next中app主动设置了setColorMode之后，如何监听手机系统的深色模式

this.context.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)

之后，然后就无法监听到系统的深色模式了，由于要做多个主题，需要在使用不同主题的时候调用setColorMode，这时无法监听手机系统的深色模式了，拿到的结果永远都是手动设置好的，如何监听系统的深色模式？

4 回复

【解决方案】

方案一：

在EntryAbility.ets中添加以下代码获取当前颜色模式值ColorMode，然后结合枚举值判断是否为深色模式。代码示例如下：

currentColorMode: ConfigurationConstant.ColorMode | undefined = undefined;
isDark: boolean = false;

onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  this.currentColorMode = this.context.config.colorMode;
  this.isDark = this.currentColorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK;
}

方案二：

  1. 在EntryAbility.ets中添加onConfigurationUpdate()生命周期，获取最新变更的颜色模式并刷新到AppStorage。代码示例如下：
export default class EntryAbility extends UIAbility {
  ...
  onConfigurationUpdate(newConfig: Configuration): void {
    AppStorage.setOrCreate('colorMode', newConfig.colorMode);
  }
}
  1. 在页面中通过@StorageProp+@Watch方式获取当前最新颜色并监听设备深色模式变化。代码示例如下：
@Component
export struct Page {
  [@StorageProp](/user/StorageProp)('colorMode') [@Watch](/user/Watch)('onColorModeChange') colorMode: number = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;

  // 初始化函数中根据当前最新颜色模式，执行资源初始化逻辑
  aboutToAppear(): void {
    this.onColorModeChange();
  }

  // 监听颜色模式变化，根据最新颜色模式，执行资源初始化逻辑
  onColorModeChange() {
    if (this.colorMode == ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
      // 当前为浅色模式，资源初始化逻辑
      ...
    } else {
      // 当前为深色模式，资源初始化逻辑
      ...
    }
  }
}

【总结】

方案一侧重于在Ability启动时主动获取当前模式值进行判断，适用于只需初始状态的场景。方案二则利用onConfigurationUpdate生命周期和AppStorage结合@StorageProp与@Watch装饰器，实现了对系统主题模式变化的动态监听与响应，适用于需要实时适配界面（如切换深/浅色主题）的场景。

更多关于HarmonyOS鸿蒙Next中app主动设置了setColorMode之后，如何监听手机系统的深色模式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


ColorMode有三个属性：切换亮色主题、切换暗色主题, 跟随系统颜色和亮色主题切换

ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT

ConfigurationConstant.ColorMode.ColorMode.COLOR_MODE_DARK

ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET

class Theme {
  // 初始化仓库
  initTheme() {
    PersistentStorage.persistProp(MODE_KEY, ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)
     this.setTheme()
  }
  
// 设置主题色
  setTheme() {
    const mode = AppStorage.get<ConfigurationConstant.ColorMode>(MODE_KEY)
    const ctx = AppStorage.get<Context>(CONTEXT)
    if (ctx) {
      ctx.getApplicationContext().setColorMode(mode)
    }
  }
// 跟随系统
  notSet() {
    AppStorage.setOrCreate(MODE_KEY, ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET)
    this.setTheme()
  }
// 设置深色
  setDark() {
    AppStorage.setOrCreate(MODE_KEY, ConfigurationConstant.ColorMode.COLOR_MODE_DARK)
    this.setTheme()
  }
// 设置亮色
  setLight() {
    AppStorage.setOrCreate(MODE_KEY, ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)
    this.setTheme()
  }
}

export const theme = new Theme()

监听深色模式可以用断点或者是媒体查询工具：媒体查询Harmony官方API

import { mediaquery } from '@kit.ArkUI';

let listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(dark-mode: true)')  //监听系统当前的深浅模式,深色模式为true，浅色模式为false。

在HarmonyOS Next中，应用通过setColorMode主动设置颜色模式后，监听系统深色模式变化需使用ConfigurationManager的on('configurationChange')方法。注册监听器后，当系统颜色模式变更时，会触发回调事件，应用可从中获取新的colorMode配置值，据此更新界面。无需依赖Java或C语言，仅使用ArkTS API实现。

在HarmonyOS Next中，当应用主动调用setColorMode()设置颜色模式后，会覆盖系统默认的颜色模式配置，导致无法直接通过常规方式监听系统深色模式变化。此时可以通过以下方法监听系统深色模式：

  1. 使用系统配置监听器：

    import configuration from '[@ohos](/user/ohos).application.Configuration';

// 注册配置变化监听
configuration.on('configChange', (config: configuration.Configuration) => {
  // 获取系统当前颜色模式
  const systemColorMode = config.colorMode;
  // 根据系统颜色模式更新应用主题
  updateAppTheme(systemColorMode);
});

  2. 主动获取系统颜色模式：

    const config = configuration.getConfiguration();
const systemColorMode = config.colorMode;

  3. 主题切换策略建议：

    • 在应用设置中提供"跟随系统"选项
    • 当用户选择"跟随系统"时，移除手动设置的setColorMode
    • 当用户选择手动主题时，再调用setColorMode设置指定主题

这样既能保持应用主题的灵活性，又能确保在需要时正确响应系统深色模式变化。

回到顶部