HarmonyOS鸿蒙Next中如何获取系统的深色模式状态

HarmonyOS鸿蒙Next中如何获取系统的深色模式状态 我在api文档找到如何给Web组件设置深色模式,但是我们的app 底部的tabbar区域 是纯原生的布局,我想问一下,我们如何查询当前系统的深色模式是否是开启? 目的就是根据查询到的状态,来动态的改变底部区域的颜色样式

4 回复

可以参考这篇论坛博客的内容：https://developer.huawei.com/consumer/cn/forum/topic/0204164387845919126?fid=0109140870620153026

如果应用是使用系统内置组件/系统颜色开发的，可以设置系统的颜色模式来是应用的颜色跟随系统：参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-light-dark-color-adaptation-V5#section1421172621111

若上述方案不符合场景，可以判断当前系统的深\浅色模式，来动态设置组件的背景色，思路如下

@Entry
@Component
struct Index {
  @State colorMode: boolean = true;
  build() {
    Column() {
      Button('click').onClick(() => {
        this.colorMode = !this.colorMode
      })
        .backgroundColor(this.colorMode ? Color.Red : Color.Green)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

更多关于HarmonyOS鸿蒙Next中如何获取系统的深色模式状态的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


context 中 config colorMode 的值，就是系统深浅色的模式。

具体可参考:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-light-dark-color-adaptation-V5

中的“4 应用监听深浅色模式切换事件”

在HarmonyOS鸿蒙Next中，获取系统的深色模式状态可以通过Configuration类来实现。具体步骤如下：

  1. 首先，引入ohos.app.Context和ohos.resource.Configuration类。
  2. 通过Context获取当前应用的Configuration对象。
  3. 使用Configuration对象的getColorMode方法来获取当前的颜色模式。

代码示例如下：

import { Configuration } from '@ohos.resource';
import { Context } from '@ohos.app.Context';

function getDarkModeStatus(context: Context): boolean {
  const config: Configuration = context.getResourceManager().getConfiguration();
  const colorMode: number = config.colorMode;
  return colorMode === Configuration.ColorMode.COLOR_MODE_DARK;
}

在这个示例中，getDarkModeStatus函数会返回一个布尔值，表示当前系统是否处于深色模式。如果colorMode等于Configuration.ColorMode.COLOR_MODE_DARK，则返回true，表示系统处于深色模式；否则返回false，表示系统处于浅色模式。

在HarmonyOS鸿蒙Next中，可以通过Configuration类来获取系统的深色模式状态。使用getSystemColorMode()方法，返回值为Configuration.COLOR_MODE_DARK或Configuration.COLOR_MODE_LIGHT，分别表示深色模式和浅色模式。示例代码如下：

import ohos.app.Context;
import ohos.global.configuration.Configuration;

public boolean isDarkModeEnabled(Context context) {
    Configuration config = context.getResourceManager().getConfiguration();
    return config.getSystemColorMode() == Configuration.COLOR_MODE_DARK;
}

此方法可用于动态适配应用主题。

回到顶部