HarmonyOS 鸿蒙Next 应用深浅色适配

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 应用深浅色适配

有支持在应用内一件切换黑白模式的api吗？看官网都是通过AbilityStage 的 onCreate() 生命周期中获取APP当前的颜色模式并保存到 AppStorage，通过这个获取模式来改变页面。如果想在当前应用的页面再次切换到别的模式，使整个应用发生改变，现在支持吗？

Harmonyos Next教程
2 回复
您可以尝试下面的方式能否实现您的需求：

1.配置

深色代码主题
复制
//resources目录结构
-resources
--base//浅色模式访问
---element
----color.json
//color.json
{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    }
  ]
}
--dark//深色模式访问
---element
----color.json
//color.json
{
  "color": [
    {
      "name": "start_window_background",
      "value": "#000000"
    }
  ]
}

2.下面是demo:

深色代码主题
复制
import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
import hilog from '@ohos.hilog';
@Entry
@Component
struct Page248282 {
  @State message: string = 'Hello World';
  build() {
    Row() {
      Column() {
        Text("light")  //应用设置颜色模式为LIGHT
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {hilog.info(0x0000, 'testTag', 'before setColorMode');
            let context = getContext().getApplicationContext()
            context.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
            console.log('------------ appUpdateConfiguration -----------'+'DARK');
          })
          .fontColor("#ffdd1a1a")
          .backgroundColor($r("app.color.start_window_background"))
        Text("dark")  // 应用设置颜色模式为DARK
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            hilog.info(0x0000, 'testTag', 'before setColorMode');
            let context = getContext().getApplicationContext()
            context.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
            console.log('------------ appUpdateConfiguration -----------'+'DARK');
          })
          .fontColor("#ffdd1a1a")
          .backgroundColor($r("app.color.start_window_background"))
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 应用深浅色适配的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next应用中实现深浅色适配，关键在于遵循系统提供的主题和样式管理机制。以下是实现深浅色适配的关键步骤：

  1. 配置主题资源：

    • 在resources目录下，分别创建light和dark主题资源文件夹，并定义对应的主题资源文件（如themes.xml）。
    • 在主题资源文件中，定义不同颜色模式下使用的颜色、字体等样式。

  2. 应用主题：

    • 在应用的根布局或活动布局文件中，通过ohos:theme属性应用主题。
    • 系统会根据当前设备的深色模式设置，自动选择对应的主题资源。

  3. 动态监听系统深浅色模式变化：

    • 使用@SystemProperty注解监听系统深浅色模式变化。
    • 在监听回调中，根据系统当前深浅色模式，动态调整应用界面。

  4. 适配组件：

    • 确保应用中的UI组件（如按钮、文本框等）支持主题样式的应用。
    • 自定义组件时，需确保能够正确响应主题变化。

  5. 测试验证：

    • 在不同深浅色模式下测试应用，确保界面显示正确，无明显样式问题。

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

回到顶部