HarmonyOS 鸿蒙Next ArkTs如何动态监听深色模式切换

//系统的深色模式
import mediaQuery from '@ohos.mediaquery'

@Component
struct ElseIfTest {
  @State color: string = "ffffff";
  @State text: string = "dark-mode: false 原始数据"
  //系统为深色模式时为true，否则为false。
  listener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync('(dark-mode: true)');

  aboutToAppear() {
    // 绑定当前应用实例
    // 绑定回调函数
    this.listener.on('change', (mediaQueryResult: mediaQuery.MediaQueryResult) => {
      this.onDarkMode(mediaQueryResult)
    });
  }

  // 当满足媒体查询条件时，触发回调
  onDarkMode(mediaQueryResult: mediaQuery.MediaQueryResult) {
    if (mediaQueryResult.matches as boolean) { // /系统为深色模式时为true，否则为false。
      this.color = '#00ff00';
      this.text = 'dark-mode: true 监听数据'
    } else {
      this.color = '#ff0000';
      this.text = 'dark-mode: false 监听数据'
    }
  }

  build() {
    Column() {
      Text(this.text)
    }
    .backgroundColor(this.color)
    .width('100%')
  }
}

在HarmonyOS（鸿蒙）系统中，使用ArkTS（Ark TypeScript）开发应用时，可以通过监听系统主题变化事件来动态响应深色模式的切换。具体实现方式如下：

ArkTS提供了@SystemSettingObserver装饰器，用于监听系统设置的变化。要监听深色模式的切换，你可以创建一个观察者类，并在其中处理主题变化事件。

示例代码如下：

import systemSetting from '@ohos.systemSetting';

@SystemSettingObserver('theme')
class ThemeObserver {
  onChange(event: { key: string, value: string }) {
    if (event.key === 'theme') {
      if (event.value === 'dark') {
        // 处理深色模式逻辑
        console.log('Dark mode enabled');
      } else if (event.value === 'light') {
        // 处理浅色模式逻辑
        console.log('Light mode enabled');
      }
    }
  }
}

// 创建观察者实例
const themeObserver = new ThemeObserver();

// 注意：在实际应用中，通常不需要手动启动观察，ArkTS框架会自动管理
// 如果你需要在特定时机停止观察，可以使用systemSetting.unsubscribe方法

上述代码定义了一个ThemeObserver类，使用@SystemSettingObserver装饰器监听theme设置的变化。当系统主题切换时，onChange方法会被调用，你可以在其中根据event.value的值来判断当前是深色模式还是浅色模式，并执行相应的逻辑。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，