山海万灵 HarmonyOS 文化知识实战（09）：深浅色资源与文化插画层级

文化知识应用的插画通常承担路线、地域、神兽与进度提示等信息。只替换页面背景色会让深色界面的山水纹理、金色强调色和卡片文本彼此争夺注意力反过来浅色界面也容易因透明图层过多而丢失边界。山海万灵把颜色、插画和组件表面拆成同一套主题分支让主题切换直接驱动页面外壳、内容卡片与背景资源更新。上图的浅色首页保留了山水路线、地域节点、统计卡和底部导航。卡片使用浅色表面和偏深文字路线与“继续探索”按钮使用独立的强调色避免在大面积插画上把所有信息都压成同一层。把主题值收敛成可组合的令牌页面不直接散落判断式颜色。ShanhaiTheme为背景、卡片、边框、主次文本、金色强调与地图路线提供成对值组件只根据isDarkMode读取语义化令牌。这样新增页面时只选择它需要的角色不必重新发明一组深浅色常量。static readonly PAGE_BG: string #07171C; static readonly DARK_CARD_SURFACE: string #03171D; static readonly DARK_CARD_RAISED: string #0A252C; static readonly DARK_CARD_SELECTED: string #16444A; static readonly LINE: string #2F6268; static readonly GOLD: string #D8A84E; static readonly CREAM: string #F7EBD3; static readonly SUB_TEXT: string #B7CACB; static readonly LIGHT_PAGE_BG: string #F6F0E4; static readonly LIGHT_PANEL_BG: string #FFF9ED; static readonly LIGHT_PANEL_BG_ALT: string #EAF1E4; static readonly LIGHT_TAG_BG: string #E2EAD9; static readonly LIGHT_LINE: string #C8B98F; static readonly LIGHT_GOLD: string #A56F20; static readonly LIGHT_CREAM: string #26372E; static readonly LIGHT_SUB_TEXT: string #5F6D64; static pageBg(isDarkMode: boolean): string { return isDarkMode ? ShanhaiTheme.PAGE_BG : ShanhaiTheme.LIGHT_PAGE_BG; } static panelBg(isDarkMode: boolean): string { return isDarkMode ? ShanhaiTheme.PANEL_BG : ShanhaiTheme.LIGHT_PANEL_BG; } static textPrimary(isDarkMode: boolean): string { return isDarkMode ? ShanhaiTheme.CREAM : ShanhaiTheme.LIGHT_CREAM; }这种分层解决了两个常见问题一是把“深色”误当作所有区域都用纯黑二是让正文、辅助说明和禁用态共用同一种灰色。山海万灵的深色页面背景、主卡片、抬升卡片和输入表面分别对应不同深度浅色页面也为卡片、替代表面和标签保留独立值。视觉角色深色主题浅色主题使用位置页面外壳深青黑米白整页背景与空白区域内容卡片深色半透明表面暖白表面统计、路线与阅读信息强调信息金色与青绿色褐金与青绿色进度、路线、主操作次级文字低饱和浅青灰绿色说明、计数和辅助状态主题状态从页面入口向下传递主题状态由首页统一持有。用户点击页头的主题控制后页面状态发生一次明确更新首页内容、图鉴、探索、馆长和“我的”模块接收相同的isDarkMode避免局部组件自行缓存旧主题。ShanhaiHomePageContent({ beasts: this.beasts, discoveredCount: this.discoveredIds.length, passportCount: this.passportRegionIds.length, isDarkMode: this.isDarkMode, onToggleTheme: () { this.isDarkMode !this.isDarkMode; } })显式传递比在每个子组件中再次读取全局状态更容易检查。组件的颜色、边框和资源选择都依赖同一布尔值切换时不会出现标题已变色而背景仍停留在旧图的分裂状态。对有选中态的地域卡和护照印章墙主题与业务选中状态保持独立切换外观不会重置发现记录、当前路线或阅读上下文。页头的图标和点击区域同样接收主题状态。太阳与月亮资源随状态切换透明圆形表面使用不同透明度点击事件只通知页面入口更新状态组件本身不保存第二份主题副本。private themeToggleIcon(): Resource { return this.isDarkMode ? $r(app.media.shanhai_toggle_moon_v2) : $r(app.media.shanhai_toggle_sun_v2); } Stack() { Image(this.themeToggleIcon()) .width(46) .height(46) .objectFit(ImageFit.Contain) } .width(54) .height(54) .backgroundColor(this.isDarkMode ? #0CF7EBD3 : #44FFFFFF) .borderRadius(27) .onClick(() { this.onToggleTheme(); })插画资源也要成对选择文化插画不是普通装饰。首页和展厅使用带有山水、云气和神兽的背景它们的明暗关系决定了文本能否被读到。组件根据主题和宽度选择对应资源再让主题令牌负责文字与卡片层级。private panelAsset(): Resource { return this.isDarkMode ? $r(app.media.shanhai_content_panel_dark_v4) : $r(app.media.shanhai_content_panel_light_v4); } .backgroundImage(shanhaiPageBackdropAsset( this.isDarkMode, this.isWideScreen ))这里有两个边界。第一深色资源不是在浅色图片上简单加黑蒙层月色、云纹和远山需要保留可辨识的亮度范围。第二业务内容不能烘焙在插画里。统计数、地域名称、路线进度和按钮仍由 ArkUI 文本与组件绘制因此主题切换、数据刷新和多设备布局不会破坏可访问性。深色主题下背景改为夜色山水和月纹统计卡、金色数字、路线节点与底部导航仍可分辨。切换前后内容数据、地域路线和统计值保持不变变化只发生在主题令牌与对应的插画资源分支。容易被忽略的层级问题深色模式的回归不只检查“有没有换色”。下面三类问题最容易在文化插画页面出现问题表现处理方式文本被纹理吞没地域名、说明和统计标签难以阅读主次文本分别取主题令牌卡片与插画之间保留不透明或半透明表面选中态不明显地图节点和底部导航无法区分当前项选中背景、边框和金色强调同时参与状态表达不只改变文字颜色图片与布局脱节宽屏下背景裁切后遮住内容背景资源选择同时接收主题和宽度内容区域仍按自适应间距布局资源缺失时页面应先保留主题颜色、标题、统计和导航等可操作信息再使用安全的普通表面作为背景不把一张加载失败的插画当成全页不可用。网络同步失败也不应改变用户已经选定的主题页面可以提示数据来源状态同时继续用本地内容完成阅读和探索。验收一次切换要同时检查哪些区域验证时从首页启动后依次观察页头、统计卡、路线图、主操作和底部导航点击主题控制切换一次再确认以下结果页面背景、山水插画和月亮/日间视觉随主题同时变化。标题、说明、金色统计值、地域标签和路线节点仍保持足够对比度。已发现数量、护照印章、知识节点和当前路线不因切换而改变。底部导航的当前项与未选中项仍有可区分的颜色和表面层级。返回其他一级页面后卡片、边框和插画继续使用同一主题状态。统一的主题令牌把颜色选择收拢在可维护的入口成对插画资源解决文化画面在不同亮度下的阅读问题显式状态传递则保证首页与各功能模块在一次主题切换后保持同步。更多 ArkUI 状态管理方式可参考 HarmonyOS 官方状态管理文档。