HarmonyOS鸿蒙NEXT中关于UI样式浅色/深色模式适配,否则影响上架拒审

HarmonyOS鸿蒙NEXT中关于UI样式浅色/深色模式适配,否则影响上架拒审 手机系统可以设置浅色、深色模式,可以呼叫小艺帮你设置。

在不同模式下,运行APP看看UI的效果,上架审核时要求字体颜色、背景等都需要适配深/浅模式。

左边是浅色模式,右边是深色模式下因字体颜色未适配导致不可见。修改字体颜色,适配的方案有以下2种:

方案1:自定义主题,

src/main/resources/base/element/color.json文件中定义页面元素在浅色模式下的颜色值(比如黑色)。

{
  "color": [
    {
      "name": "text_color",
      "value": "#000000"
    }
  ]
}

src/main/resources/dark/element/color.json文件中定义页面元素在深色模式下的颜色值(比如白色)。

{
  "color": [
    {
      "name": "text_color",
      "value": "#FFFFFF"
    }
  ]
}

方案2:使用系统资源。会自动适配深色模式,可以通过$r('sys.type.resource_name')的形式访问。其中,sys表示系统资源;type为资源类型,取值包括"color""float""string""media""symbol"resource_name为资源名称。

Text('农民叔叔')
  .fontColor($r('sys.color.ohos_id_color_emphasize'))

更多UI设计规范请参考:

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation


更多关于HarmonyOS鸿蒙NEXT中关于UI样式浅色/深色模式适配,否则影响上架拒审的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙NEXT中关于UI样式浅色/深色模式适配,否则影响上架拒审的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙NEXT中,UI样式必须适配浅色和深色模式,以确保应用在不同系统主题下都能正常显示。开发者应使用系统提供的资源管理机制,如ResourceManager,动态加载不同主题下的颜色、图片等资源。同时,建议在开发过程中使用ThemeStyle来定义UI元素的外观,确保在切换主题时样式能自动适配。未适配浅色/深色模式可能导致应用在上架审核时被拒绝,因此务必进行全面测试和优化。

回到顶部