基于 ThemeDemo 实战验证覆盖 State 条件函数、AppStorage 全局主题、资源限定词三种方案附带完整可运行代码写在前面做深色模式这事儿很多人觉得不就是换个背景色嘛。天真。你把背景色改成 #121212结果文字还是 #333333——恭喜深色背景配深色文字用户什么都看不见。深色模式的核心不是改颜色是保证所有颜色都有对应的深色版本并且切换时不能有遗漏。这篇文章把三种实现方案都走了一遍坑多得你不敢信。一、方案一State 条件函数Demo 采用最直觉的方案——用State isDark: boolean驱动所有颜色通过函数返回StateisDark:booleanfalseprivatebgColor():string{returnthis.isDark?#121212:#ffffff}privatecardBg():string{returnthis.isDark?#1e1e1e:#f8f8f8}privatetextColor():string{returnthis.isDark?#e0e0e0:#333333}UI 里所有硬编码颜色替换成函数调用Column(){Text(标题).fontColor(this.textColor()).backgroundColor(this.cardBg())}.backgroundColor(this.bgColor())优点实现简单不需要额外架构切换即时生效State 变了 UI 自动刷新方便调试isDark 一眼就知道当前主题缺点颜色散落在各组件的函数里不好统一管理新增颜色需要在每个组件里加函数页面多了函数重复率很高适合场景小项目、单页面 Demo、快速验证。颜色不多的时候这个方案够用。二、方案二AppStorage StorageLink 全局主题项目稍微大一点就需要全局管理主题色。把颜色存到 AppStorage所有组件通过 StorageLink 监听// 初始化EntryAbility 或首组件 aboutToAppearAppStorage.setOrCreate(themeBgColor,#ffffff)AppStorage.setOrCreate(themeCardBg,#f8f8f8)AppStorage.setOrCreate(themeTextColor,#333333)AppStorage.setOrCreate(themePrimaryColor,#1a73e8)AppStorage.setOrCreate(isDarkMode,false)// 各组件StorageLink(themeBgColor)bgColor:string#ffffffStorageLink(themeTextColor)textColor:string#333333切换主题时统一修改 AppStoragetoggleDarkMode():void{constisDark:boolean!(AppStorage.getboolean(isDarkMode)??false)AppStorage.setOrCreate(isDarkMode,isDark)AppStorage.setOrCreate(themeBgColor,isDark?#121212:#ffffff)AppStorage.setOrCreate(themeCardBg,isDark?#1e1e1e:#f8f8f8)AppStorage.setOrCreate(themeTextColor,isDark?#e0e0e0:#333333)}优点全局统一一处修改处处生效跨页面共享主题状态新页面只需声明 StorageLink不用重复定义函数缺点StorageLink 的 key 必须先 setOrCreate否则崩溃主题色多了初始化代码很长需要维护一个主题色常量表适合场景中大型项目、多页面共享主题。主题色在 20 个以内的项目用这个方案最合适。三、方案三资源限定词resources/dark/HarmonyOS 支持通过资源目录自动适配深色模式resources/ base/ element/ color.json // 浅色颜色 media/ icon.png // 浅色图片 dark/ element/ color.json // 深色颜色 media/ icon.png // 深色图片UI 代码里用$r()引用资源系统自动根据当前模式选择.backgroundColor($r(app.color.background)).fontColor($r(app.color.text_primary))优点系统原生支持跟随系统深色模式自动切换UI 代码不需要任何 isDark 判断图片资源也能自动适配缺点只能跟随系统不能应用内独立切换资源文件维护成本高新增颜色要改两个 color.json调试不直观看不出当前用的是哪个资源适合场景跟随系统深色模式的项目不需要应用内手动切换主题。四、三种方案对比方案切换方式作用域跨页面图片适配维护成本适合规模State函数应用内切换组件级需手动传递不支持低小项目AppStorage应用内切换全局自动不支持中中项目资源限定词跟随系统全局自动支持高大项目我的建议中小项目用 AppStorage 方案大项目用资源限定词 AppStorage 组合。资源限定词处理跟随系统的自动适配AppStorage 处理应用内手动切换。五、主题色切换的实现Demo 里还实现了主题色切换用户可以选择不同的主色调StateprimaryColor:string#1a73e8Row({space:8}){ForEach([#1a73e8,#e65100,#34a853,#9c27b0,#d32f2f],(color:string){Row().width(36).height(36).borderRadius(18).backgroundColor(color).border({width:this.primaryColorcolor?3:0,color:#333333}).onClick((){this.primaryColorcolor})},(color:string,index:number)index.toString())}深色模式下主题色需要用更亮的变体否则在深色背景上对比度不够privatelightColors:string[][#1a73e8,#e65100,#34a853,#9c27b0,#d32f2f]privatedarkColors:string[][#64b5f6,#ff9800,#81c784,#ce93d8,#ef5350]六、踩坑合集坑一只改背景色不改文字色这是最常见的低级错误。改了背景色忘了改文字色深色背景上深色文字用户什么都看不见。检查清单背景色、文字色、副文字色、分割线色、卡片色全都要改。坑二阴影在深色模式下不可见浅色模式下shadow({ radius: 8, color: #1a000000 })看着挺好的深色模式下透明度 10% 的黑色阴影在 #121212 背景上完全看不见。深色模式的阴影应该用更亮的颜色或者改用边框替代。坑三Web/Canvas 内容不跟随主题WebView 加载的网页、Canvas 绘制的内容不会自动适配深色模式。网页需要自己实现深色主题CSS prefers-color-schemeCanvas 需要重新绘制。坑四系统弹窗不跟随应用主题AlertDialog.show()等系统弹窗默认跟随系统主题不受应用内 isDark 控制。如果你的应用是浅色模式但系统是深色弹窗会显示深色。目前没有好的解决方案只能用 CustomDialog 替代。坑五PNG 图标不好适配PNG 图标在深色模式下需要准备两套维护成本翻倍。建议用 SVG 格式通过.fillColor()动态改颜色一套资源搞定两种模式。七、透明度调整深色模式下相同的透明度值视觉效果不一样。浅色背景上 10% 透明度的叠加色很淡深色背景上同样的值可能完全看不出。通用规律深色背景上主色的透明度需要提高10%→20%浅色背景上辅助色的透明度可以降低20%→10%Demo 里的做法是浅色色板和深色色板分开定义避免运行时算透明度。八、状态栏颜色深色模式切换后状态栏颜色也要跟着改。通过窗口实例设置constmainWindowAppStorage.getwindow.Window(mainWindow)if(mainWindow){mainWindow.setWindowSystemBarProperties({statusBarColor:this.isDark?#121212:#ffffff,statusBarContentColor:this.isDark?#e0e0e0:#333333})}如果忘了改状态栏深色页面顶着白色状态栏割裂感极强。写在最后深色模式看着简单做起来全是细节。颜色遗漏一个地方就穿帮阴影不调就消失图标不换就别扭。建议做深色模式的时候列一个颜色清单改一个划一个不然一定会漏。另外如果项目时间紧优先保证核心页面的深色模式。设置页、关于页这些次要页面可以后做但首页和主功能页面必须第一时间适配。