HarmonyOS 鸿蒙Next中深色模式下UI/UX适配方案

HarmonyOS 鸿蒙Next中深色模式下UI/UX适配方案 Q：

在深色模式下，文本或图标与背景的色彩对比度不足，导致内容难以辨认。应如何调整前景色或背景色，使色彩对比度达到清晰可读的级别？

14 回复

ArkUI沉浸式和深色模式

可以参考以上codelabs示例

更多关于HarmonyOS 鸿蒙Next中深色模式下UI/UX适配方案的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


解决方案：

采用系统颜色资源

优先使用系统提供的语义化颜色资源，例如：

Text('示例文本')
  .fontColor($r('sys.color.ohos_id_color_foreground'))  // 使用系统前景色资源
  .backgroundColor($r('sys.color.ohos_id_color_background')) // 使用系统背景色资源

系统资源会自动根据深浅模式切换颜色，确保对比度符合WCAG标准。

可以选择暂不适配。
// 设置应用为浅色模式
this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);，

nice，👍（暂时可以这么苟一下🐶），

找HarmonyOS工作还需要会Flutter技术的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

这是一条评论

感谢楼主分享

图标媒体资源适配

针对SVG图标使用动态填色：

Image($r('app.media.icon_settings'))
  .fillColor($r('app.color.icon_fill'))

非SVG资源需分别在resources/base/media和resources/dark/media目录放置不同配色版本。

输入框等组件特殊处理

对于问题高发组件（如TextInput），需手动调整：

TextInput()
  .fontColor($r('app.color.text_primary')) 
  .placeholderColor($r('app.color.text_secondary'))
  // 移除固定背景色设置，或使用动态资源
  .backgroundColor($r('app.color.background_input'))

动态监听模式变化在AbilityStage中注册配置更新事件：

// AbilityStage.ts
onConfigurationUpdate(newConfig: Configuration): void {
  const currentMode = newConfig.colorMode;
  AppStorage.setOrCreate('currentColorMode', currentMode);
  this.updateTheme(currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
}

private updateTheme(isDark: boolean): void {
  // 根据模式更新全局状态或重绘组件
}

解决方案

自定义颜色资源分层在resources/base/element和resources/dark/element中分别定义颜色

// base/element/color.json
{
  "color": [
    { "name": "text_primary", "value": "#FF1A1A1A" }
  ]
}

// dark/element/color.json 
{
  "color": [
    { "name": "text_primary", "value": "#FFFFFFFF" }
  ]
}

通过资源目录自动切换实现深浅色适配

当内容与背景对比度不足时（如弹窗文字、输入框、图标等），通常由以下原因导致：

  • 未使用系统分层参数：直接硬编码颜色值导致无法自动适配深色模式。
  • 自定义组件未手动适配：例如弹窗背景依赖系统默认适配，但内部未覆盖自定义内容颜色。
  • 媒体资源未区分模式：图标/图片未针对深色模式提供差异化资源。

鸿蒙Next深色模式适配通过系统级主题框架实现。应用需使用ArkUI声明式开发范式，在resources目录下配置dark主题资源。颜色资源应定义在color.json中，使用系统预置的动态颜色资源或自定义引用式资源。布局和组件会自动适配当前主题，无需代码逻辑判断。图片资源可通过在dark目录下放置同名深色版本实现自动切换。

在HarmonyOS Next中，确保深色模式下的色彩对比度是UI/UX适配的核心。系统提供了完整的深色主题框架和资源管理机制，开发者应优先使用系统定义的语义化色彩资源，而非硬编码颜色值。

核心方案：使用资源管理与动态色彩

  1. 定义色彩资源：在resources/base/element/目录下的color.json文件中，为同一色彩语义（如primary_text）分别定义浅色与深色值。系统会根据当前主题自动切换。

    {
  "color": [
    {
      "name": "primary_text",
      "value": "#E6000000" // 浅色模式下的值
    },
    {
      "name": "primary_text",
      "value": "#E6FFFFFF", // 深色模式下的值
      "theme": "dark" // 指定深色主题
    }
  ]
}

  2. 应用色彩资源：在布局或代码中，通过$r('app.color.primary_text')引用该资源。系统会自动匹配当前模式。

  3. 遵循对比度标准：在定义深色值（特别是文本与背景色）时，必须满足WCAG（Web内容无障碍指南）AA级标准（对比度至少4.5:1）。可以使用在线对比度检查工具验证。系统推荐的深色背景色通常为#000000或#1A1A1A，前景文本色为不同透明度的白色（如#E6FFFFFF）。

  4. 图标与图像适配：对于图标，同样应在resources/base/media/目录下提供深色与浅色两套图符资源，并通过资源名引用。对于复杂图像，可考虑使用ArkUI的renderingEffect属性（如.blur）或覆盖半透明蒙层来降低背景干扰。

关键检查点：

  • 避免绝对色值：严禁在代码或布局中直接使用#FFFFFF或#000000。
  • 测试验证：务必在真机或模拟器上切换浅色/深色主题进行视觉验证。
  • 利用系统能力：对于需要动态计算颜色的高级场景，可探索@ohos.ui能力，但基础适配通过资源管理即可完成。

通过严格依赖系统的主题资源切换机制，可以高效、可靠地解决深色模式下的对比度问题，并保证应用体验的一致性。

回到顶部