【HarmonyOS NEXT】如何适配深色模式

最新推荐文章于 2024-08-30 16:06:38 发布

Mayism123

最新推荐文章于 2024-08-30 16:06:38 发布

阅读量304

点赞数 2

文章标签： harmonyos

本文链接：https://blog.csdn.net/Mayism123/article/details/137014737

版权

本文介绍了在HarmonyOS中如何通过MediaQueryListener监听设备的深色模式状态，并提供了一个示例代码，展示了如何根据系统颜色模式改变应用界面的样式。

摘要由CSDN通过智能技术生成

【关键字】

深色模式 / @ohos.mediaquery（媒体查询）模块/ MediaQueryListener

【问题描述】

如何适配深色模式？

【解决方案】

使用mediaquery.MediaQueryListener进行监听，参考示例如下：

import mediaQuery from '@ohos.mediaquery'

@Entry
@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%')
}
}

@ohos.mediaquery（媒体查询）模块接口文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-mediaquery-0000001774121130#ZH-CN_TOPIC_0000001774121130__mediaquerylistener