open harmony 项目实战：深浅色主题适配方案

open harmony 项目实战深浅色主题适配方案一个 App 是否精致深浅色适配是很明显的分水岭。尤其是学习类应用用户可能在白天、晚上、室内、通勤等不同场景使用如果深色模式没做好阅读体验会很受影响。“语文视界”项目里我把主题颜色集中封装到ThemeColors.ets再通过AppStorage分发给各个页面。一、为什么要抽离主题如果每个页面都直接写颜色比如.backgroundColor(#FFFFFF).fontColor(#333333)后续想做深色模式时会非常痛苦。你需要到处找颜色值还容易漏掉。所以项目使用统一主题类exportclassThemeColors{isDark:boolean;constructor(isDark:boolean) {this.isDark isDark; } }页面只关心语义颜色不关心具体色值。二、背景色和卡片色getbackgroundColor():string{returnthis.isDark ?#1A1A2E:#FFF9F0; }getcardBackground():string{returnthis.isDark ?#2D2D44:#FFFFFF; }getcardSoft():string{returnthis.isDark ?#3D3D55:#FFF5EE; }浅色模式用温暖背景深色模式用偏蓝紫的深色背景保持语文学习 App 的柔和气质。三、文字颜色文字颜色是深色模式最容易出问题的地方。gettextPrimary():string{returnthis.isDark ?#FFFFFF:#4A4A4A; }gettextSecondary():string{returnthis.isDark ?#B8B8C8:#8B8B8B; }getplaceholderText():string{returnthis.isDark ?#8A8A9A:#BBBBBB; }主文字、次文字、占位文字分开管理可以避免所有文字都一个颜色导致层次混乱。四、强调色和功能色项目中有多个强调色getaccentColor():string{returnthis.isDark ?#FF8A8A:#FF6B6B; }getaccentYellow():string{returnthis.isDark ?#FFE066:#F7DC6F; }getaccentPurple():string{returnthis.isDark ?#BB77DD:#9B59B6; }这些颜色用于收藏、学习天数、模块入口、标签等位置让页面既统一又有活力。五、应用启动时初始化主题EntryAbility会读取系统颜色模式const initDark this.context.config.colorModeConfigurationConstant.ColorMode.COLOR_MODE_DARK;AppStorage.setOrCreate(theme,buildTheme(initDark));buildTheme很简单exportfunctionbuildTheme(isDark:boolean): ThemeColors { returnnewThemeColors(isDark); }这样应用启动时就能拿到正确主题。六、系统模式变化时同步当系统深浅色变化时应用需要更新主题onConfigurationUpdate(newConfig: Configuration): void { const mode newConfig.colorMode; const isDark modeConfigurationConstant.ColorMode.COLOR_MODE_DARK;AppStorage.setOrCreate(theme,buildTheme(isDark)); }应用回到前台时也会同步一次onForeground(): void { const mode this.context.config.colorMode; const isDark modeConfigurationConstant.ColorMode.COLOR_MODE_DARK;AppStorage.setOrCreate(theme,buildTheme(isDark)); }七、页面如何使用主题页面通过StorageLink绑定主题StorageLink(theme) theme: ThemeColors AppStorage.getThemeColors(theme) ??newThemeColors(false);使用时只需要.backgroundColor(this.theme.backgroundColor).fontColor(this.theme.textPrimary)主题变化后页面会自动跟随更新。八、特殊组件单独处理有些组件在深色模式下需要额外优化比如返回按钮getnavBackFill():string{returnthis.isDark ?#2D2D44:#FFB6C1; }getnavBackLabel():string{returnthis.isDark ?#FFFFFF:#FFA500; }如果不单独处理浅粉底配浅色文字可能会看不清。九、深色模式适配建议我的经验是不要简单把白色变黑色。文字至少分主次两级。边框和分割线要降低存在感。强调色在深色模式下要提高亮度。卡片背景和页面背景要有层次。空状态、按钮、标签都要检查。总结深浅色适配不是最后随便换几个颜色而应该从主题系统开始设计。在这个项目中ThemeColors AppStorage StorageLink形成了一套轻量主题方案。它不复杂但足够支撑首页、诗词、阅读、字典、学习和我的页面统一适配。✨