文章目录前言为什么要适配暗黑模式颜色资源定义亮色模式颜色base/element/color.json暗黑模式颜色dark/element/color.json3 步适配第一步配置 module.json5第二步资源文件按目录组织第三步监听模式切换动态切换图片资源适配系统监听写在最后前言我之前上架一个 App审核直接打回来了——原因就是没适配暗黑模式。说实话当时挺不爽的但用了几天暗黑模式后真香了。HarmonyOS7 的暗黑模式适配其实没那么难3 步就能搞定今天手把手教你。暗黑模式不是换个黑色背景那么简单。文字颜色、图片资源、分割线、阴影——所有视觉元素都得跟着调。如果硬编码颜色值适配起来就是灾难。核心思路是所有颜色和图片都走资源引用系统自动帮你切换。为什么要适配暗黑模式除了审核要求还有几个实际好处省电——OLED 屏幕上黑色像素不发光暗黑模式真的能省电护眼——夜间使用时白色背景太刺眼暗黑模式舒服多了高级感——说实话很多 App 暗黑模式就是比亮色好看如果实在不想适配可以强制锁定亮色模式。但这招不推荐迟早得改。强制亮色的兜底代码不推荐但你知道有这招letapplicationContextthis.context.getApplicationContext()applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)颜色资源定义适配暗黑模式的第一步把所有硬编码的颜色值抽到资源文件里。亮色模式颜色base/element/color.json{color:[{name:app_background,value:#FFFFFF},{name:app_title_color,value:#000000},{name:app_subtitle_color,value:#666666},{name:app_divider,value:#E5E5E5},{name:app_primary,value:#007DFF}]}暗黑模式颜色dark/element/color.json{color:[{name:app_background,value:#1A1A1A},{name:app_title_color,value:#E6E6E6},{name:app_subtitle_color,value:#999999},{name:app_divider,value:#333333},{name:app_primary,value:#317AF7}]}关键点两个文件的name必须完全一致系统根据 name 匹配当前模式是暗黑就用dark目录下的值否则用base目录的。你代码里只需要写$r(app.color.app_background)剩下的系统全包了。3 步适配第一步配置 module.json5确认你的应用没有强制锁定颜色模式。默认情况下应用会跟随系统不需要额外配置。如果你之前加了colorMode配置删掉就行。第二步资源文件按目录组织目录结构长这样resources/ ├── base/ │ └── element/ │ └── color.json ← 亮色模式颜色 ├── dark/ │ └── element/ │ └── color.json ← 暗黑模式颜色 └── rawfile/在代码中引用颜色资源EntryComponentstruct DarkModeDemo{build(){Column(){Text(标题文字).fontSize(20).fontWeight(FontWeight.Bold).fontColor($r(app.color.app_title_color))Text(副标题).fontSize(14).fontColor($r(app.color.app_subtitle_color))Divider().color($r(app.color.app_divider))}.width(100%).height(100%).backgroundColor($r(app.color.app_background)).padding(16)}}注意背景色、文字色、分割线色——全部用$r()引用一个硬编码的#xxx都不要留。第三步监听模式切换有些场景需要在代码中感知暗黑模式变化比如需要更新 Web 组件的背景色。import{Configuration,UIAbility,ConfigurationConstant}fromkit.AbilityKitexportdefaultclassEntryAbilityextendsUIAbility{onConfigurationUpdate(newConfig:Configuration):void{AppStorage.setOrCreate(colorMode,newConfig.colorMode)}}解释onConfigurationUpdate在系统模式变化时触发把当前colorMode存到AppStorage全局可用。在页面中监听变化EntryComponentstruct ThemeAwarePage{StorageLink(colorMode)Watch(onColorModeChange)colorMode:ConfigurationConstant.ColorModeConfigurationConstant.ColorMode.COLOR_MODE_NOT_SETonColorModeChange(){if(this.colorModeConfigurationConstant.ColorMode.COLOR_MODE_DARK){console.info(切换到暗黑模式)}else{console.info(切换到亮色模式)}}build(){Column(){Text(主题感知页面).fontColor($r(app.color.app_title_color))}.width(100%).height(100%).backgroundColor($r(app.color.app_background))}}StorageLink双向绑定AppStorage中的值Watch在值变化时触发回调。这两个装饰器配合实现模式切换的即时响应。动态切换有时候用户想在 App 内手动切换主题不走系统设置。可以这样实现EntryComponentstruct ManualThemeSwitch{StorageLink(colorMode)colorMode:ConfigurationConstant.ColorModeConfigurationConstant.ColorMode.COLOR_MODE_NOT_SETStateisDark:booleanfalsetoggleTheme(){this.isDark!this.isDarkletapplicationContextgetContext(this).getApplicationContext()if(this.isDark){applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK)}else{applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)}}build(){Column(){Toggle({type:ToggleType.Switch,isOn:this.isDark}).onChange((isOn:boolean){this.toggleTheme()})Text(手动切换主题).fontColor($r(app.color.app_title_color)).margin({top:20})}.width(100%).height(100%).justifyContent(FlexAlign.Center).backgroundColor($r(app.color.app_background))}}setColorMode可以主动设置应用的颜色模式不跟随系统。但用了这个方法后应用就不再自动跟随系统了除非你再次调用时传入COLOR_MODE_NOT_SET。图片资源适配颜色有dark目录图片也一样。把暗黑模式下的同名图片放到dark/media/目录resources/ ├── base/ │ ├── element/color.json │ └── media/ │ └── logo.png ← 亮色模式图片 └── dark/ ├── element/color.json └── media/ └── logo.png ← 暗黑模式图片代码中正常引用系统自动切换Image($r(app.media.logo)).width(100).height(100)对于 SVG 图标还有更省事的办法——用fillColor动态改颜色不用准备两套图Image($r(app.media.icon_svg)).width(24).height(24).fillColor($r(app.color.app_title_color))这招真香一个 SVG 文件配合颜色资源就能适配两种模式省了双倍图片资源。系统监听还有一个更快的方式直接用系统预置资源。HarmonyOS 提供了sys.color系列资源本身就适配了暗黑模式Text(使用系统配色).fontColor($r(sys.color.ohos_id_color_text_primary))用系统资源的好处是零配置不用建dark目录。缺点是你的 App 会跟着系统风格走没法做个性化定制。写在最后暗黑模式适配的核心就是一句话别硬编码颜色和图片全走资源引用。只要做到这一点3 步就能搞定建立dark资源目录所有视觉元素用$r()引用需要时监听模式变化提前做好适配比后面补不知道省多少事。等项目大了再回来改硬编码的颜色值那个痛苦你不想体验的。
