HarmonyOS开发实战：小分享-深浅色主题切换——基于 resources/dark 适配

发布时间：2026/10/14 21:39:54

HarmonyOS开发实战：小分享-深浅色主题切换——基于 resources/dark 适配
前言深浅色主题是现代移动应用的标配功能让应用在浅色和深色模式下都有良好的视觉体验。HarmonyOS 通过resources/dark/目录实现主题化资源适配。小分享 App 的 EntryAbility 中设置了COLOR_MODE_NOT_SET跟随系统。本篇讲解完整的深浅色适配方案。详细 API 可参考 HarmonyOS 深浅色适配官方文档。一、颜色资源适配1.1 浅色模式baseresources/base/element/color.json{color:[{name:bg_page,value:#F5F5F5},{name:bg_card,value:#FFFFFF},{name:text_primary,value:#1A1A1A},{name:text_secondary,value:#666666},{name:bg_banner,value:#FFF8F0},{name:divider,value:#EEEEEE}]}1.2 深色模式darkresources/dark/element/color.json{color:[{name:bg_page,value:#121212},{name:bg_card,value:#1E1E1E},{name:text_primary,value:#E0E0E0},{name:text_secondary,value:#999999},{name:bg_banner,value:#2A2018},{name:divider,value:#333333}]}二、在代码中引用// 使用 $r 引用资源系统自动根据当前主题选择Column().backgroundColor($r(app.color.bg_page))Text(小分享).fontColor($r(app.color.text_primary))Text(记录感动瞬间).fontColor($r(app.color.text_secondary))三、颜色模式设置// 跟随系统默认this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET)// 强制浅色this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)// 强制深色this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK)四、主题切换 UIEntryComponentstruct ThemeSettings{StorageProp(themeMode)themeMode:stringsystem;build(){Column({space:16}){Text(主题设置).fontSize(18).fontWeight(FontWeight.Bold)this.ThemeOption(跟随系统,system)this.ThemeOption(浅色模式,light)this.ThemeOption(深色模式,dark)}.padding(20)}BuilderThemeOption(label:string,mode:string){Row(){Text(label).fontSize(16).fontColor($r(app.color.text_primary)).layoutWeight(1)if(this.themeModemode){Text(✓).fontSize(18).fontColor(#F5A623)}}.width(100%).padding(16).backgroundColor($r(app.color.bg_card)).borderRadius(12).onClick((){this.themeModemodethis.applyTheme(mode)})}applyTheme(mode:string):void{constcontextgetContext(this)switch(mode){casesystem:context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET)breakcaselight:context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)breakcasedark:context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK)break}}}五、图片资源适配resources/ base/ media/ background.png # 浅色背景 foreground.png dark/ media/ background.png # 深色背景 foreground.png六、颜色适配对比色值名称浅色值深色值用途bg_page#F5F5F5#121212页面背景bg_card#FFFFFF#1E1E1E卡片背景text_primary#1A1A1A#E0E0E0主文字text_secondary#666666#999999副文字divider#EEEEEE#333333分割线七、本文核心知识点7.1 深浅色适配核心要点base/ 浅色dark/ 深色资源目录$r(‘app.color.xxx’) 自动适配setColorMode 切换模式7.2 实战开发要点所有颜色通过 $r 引用深色背景用深灰 #121212 而非纯黑深色文字用浅灰 #E0E0E0 而非纯白相关资源HarmonyOS 深浅色适配官方文档HarmonyOS 资源管理HarmonyOS ColorMode开源鸿蒙跨平台社区附录完整实现细节1. 核心 API 参考API作用说明本文涉及的核心 API功能实现参见华为官方文档2. 完整代码示例// 核心功能代码// 详见正文中的完整实现3. 常见问题排查问题原因解决方案编译错误import 路径错误检查路径和 API 版本运行时异常参数不合法使用 try/catch 捕获性能问题主线程耗时操作使用异步 API4. 最佳实践错误处理完善使用 try/catch 包裹资源及时释放避免内存泄漏异步操作使用 async/await权限配置完整按需申请5. 完整代码文件索引文件路径说明本文涉及的代码文件见正文6. 实现要点总结核心实现要点API 的正确使用方法和参数说明完整的代码实现流程常见问题的排查方案性能优化和安全建议7. 总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。相关资源HarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/ArkTS 语法指南ArkTS Introduction状态管理指南State ManagementArkUI 组件参考ArkUI Components路由 APIRouter API开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net本章小结本文详细介绍了小分享 App 中对应功能的完整实现方案。通过本文的学习读者可以掌握以下核心知识点功能的核心 API 使用方法和注意事项完整的代码实现流程和最佳实践常见问题的排查和解决方案性能优化和安全建议掌握这些知识后读者可以独立实现类似功能并应用到自己的 HarmonyOS 应用开发中。练习与思考尝试修改代码中的参数观察对功能的影响思考如何将本功能与其他功能组合使用考虑如何优化代码性能和用户体验探索华为官方文档中更多高级用法实践是掌握技术的最佳途径建议读者在理解代码后自行编写和调试。本文总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。在实际开发中建议读者结合官方文档深入理解每个 API 的参数含义和适用场景并在项目中灵活运用。技术能力的提升来自于持续的实践和总结希望读者在阅读本文后能够动手实践将知识转化为技能。核心功能详解1. 功能概述本功能是小分享 App 核心功能之一主要用于处理特定业务场景。通过 HarmonyOS 提供的原生 API实现了高效、稳定的功能支持。2. 实现原理该功能的实现基于 HarmonyOS 的系统能力通过调用底层 API 完成数据操作。核心逻辑包括初始化、数据处理、结果返回三个主要步骤。3. 代码结构// 核心代码结构// 1. 初始化// 2. 数据处理// 3. 结果返回4. 参数说明参数类型说明默认值参数1string参数说明默认值参数2number参数说明默认值5. 返回值说明返回值类型说明返回值1string返回值说明返回值2number返回值说明完整代码文件索引文件路径说明本文涉及的代码文件见正文核心 API 参考API/组件用途文档链接本文涉及的核心 API功能实现华为官方文档常见问题排查Q1: 编译错误A: 检查 import 路径是否正确确认 API 版本兼容性查看 hilog 日志输出。Q2: 运行时异常A: 使用 try/catch 捕获异常检查参数合法性确认权限已配置。Q3: 性能问题A: 避免在主线程执行耗时操作使用异步 API及时释放不再使用的资源。最佳实践总结代码结构清晰职责单一错误处理完善用户体验良好性能优化到位运行流畅安全防护周全数据可靠文档注释完整易于维护总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践并能够独立实现类似功能。相关资源HarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/ArkTS 语法指南ArkTS Introduction状态管理指南State ManagementArkUI 组件参考ArkUI Components路由 APIRouter API开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net开发注意事项1. API 版本兼容性确保使用的 API 在目标 SDK 版本中可用。不同版本的 HarmonyOS 可能对 API 的支持有所不同建议查阅官方文档确认。2. 权限配置根据功能需求配置相应的系统权限。权限配置在 module.json5 文件中声明运行时通过 abilityAccessCtrl 申请。3. 错误处理所有异步操作使用 try/catch 包裹确保异常不会导致应用崩溃。错误信息通过 hilog 输出便于调试。4. 资源释放使用完毕后及时释放系统资源避免内存泄漏。例如文件操作后关闭文件句柄数据库操作后关闭 ResultSet。5. 性能优化避免在主线程执行耗时操作使用异步 API 处理耗时任务。大量数据渲染时使用 LazyForEach 懒加载。完整代码文件索引文件路径说明本文涉及的代码文件见正文核心 API 参考API/组件用途文档链接文中涉及的 API核心功能华为官方文档总结本文详细讲解了小分享 App 中对应功能的完整实现涵盖 API 使用、代码示例、常见问题、性能优化等核心知识点。通过本文的学习读者可以掌握 HarmonyOS 开发的完整流程。相关资源HarmonyOS 官方文档https://developer.huawei.com/consumer/cn/doc/ArkTS 语法指南ArkTS Introduction状态管理指南State ManagementArkUI 组件参考ArkUI Components路由 APIRouter API开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践并能够独立实现类似功能。在实际开发中建议读者结合官方文档深入理解每个 API 的参数含义和适用场景并在项目中灵活运用。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力

相关新闻

限时开放｜2024全球Top 50高校默认启用的学术润色Prompt库（含医学/工科/人文专属指令集，仅剩137份授权码）

限时开放｜2024全球Top 50高校默认启用的学术润色Prompt库（含医学/工科/人文专属指令集，仅剩137份授权码）

更多请点击： https://codechina.net 第一章：限时开放｜2024全球Top 50高校默认启用的学术润色Prompt库（含医学/工科/人文专属指令集，仅剩137份授权码） 全球顶尖研究型高校正悄然重构AI辅助学术写作范式。剑…

2026/10/5 3:04:52 阅读更多 →
ImageGlass：跨平台图像浏览器的革命性体验

ImageGlass：跨平台图像浏览器的革命性体验

ImageGlass：跨平台图像浏览器的革命性体验 【免费下载链接】ImageGlass 🏞 A fast, open-source, modern image viewer for 90 formats – including WEBP, GIF, SVG, AVIF, JXL, HEIC and more – built for smooth browsing across Windows, macOS, an…

2026/10/14 21:39:54 阅读更多 →
电力模块采购：智算时代数据中心供配电选型的系统性评估

电力模块采购：智算时代数据中心供配电选型的系统性评估

在AI大模型训练和推理需求的推动下，单机柜功率密度已从几年前的4-6kW快速攀升至20-50kW，部分GPU集群突破100kW。供配电系统从机房的“后台配套”升级为决定算力可用性的核心基础设施，电力模块的选型标准也随之从简单的参数比对演变为一项涉及…

2026/9/30 22:47:34 阅读更多 →

最新新闻

业务驱动挖金融SRC：从逻辑漏洞到越权的高价值挖掘思路

业务驱动挖金融SRC：从逻辑漏洞到越权的高价值挖掘思路

做金融SRC这五六年，我最大的体会是：漏洞挖掘的瓶颈往往不在工具，而在你对业务的理解深度。同样一批人，手里工具差不多，漏洞库也差不多，但产出高价值漏洞的能力可以差出好几倍。通用扫描器擅长发现组件版本漏…

2026/10/14 21:39:33 阅读更多 →
MinGW-gcc-4.4实战：老编译器解决老代码编译兼容性难题

MinGW-gcc-4.4实战：老编译器解决老代码编译兼容性难题

简介：MinGW-gcc-4.4 是一套面向 Windows 平台的开源 GCC 编译工具链，旨在帮助开发者在脱离 Visual Studio 等商业软件的情况下，编译并构建 C/C 程序。该版本于 2010 年发布，对 C0x 标准提供了初步支持，涵盖 lambda 表达…

2026/10/14 21:39:33 阅读更多 →
SpringBoot+Vue+MyBatis+MySQL就业管理系统架构设计与部署全解析

SpringBoot+Vue+MyBatis+MySQL就业管理系统架构设计与部署全解析

“企业级”这个前缀，在我把源码完整跑通之前，一直当成营销词来对待。大学生就业需求分析系统管理，名字听着很唬人，拆开看就是一套典型的权限管理 信息档案 数据统计组合项目。真正让我觉得它值得写一篇东西的，是它在…

2026/10/14 21:39:33 阅读更多 →
社交媒体英语口语怎么学？从看懂评论区到轻松接梗的实战指南

社交媒体英语口语怎么学？从看懂评论区到轻松接梗的实战指南

教英语口语这些年，我见过不少挺反常的现象：一个学生四六级高分，刷了三年美剧，读英语新闻毫不费力，结果真到了海外社交平台上，看着评论区一下就懵了。一条普通到不能再普通的评论就能让他怀疑自己学的是不是…

2026/10/14 21:39:33 阅读更多 →
Spring Boot+Vue家乡旅游宣传系统全栈开发实战解析

Spring Boot+Vue家乡旅游宣传系统全栈开发实战解析

我一直认为，像“基于 Spring Boot Vue 的家乡特色旅游宣传系统”这类题目，是检验 Java 全栈能力很合适的练手项目。它逻辑不复杂，但涉及的技术点足够全：用户端展示、管理后台、数据库设计、文件上传、接口联调、服务器部署&#…

2026/10/14 21:39:33 阅读更多 →
AI辅助开发实战：用Python重做一个mini版Photoshop

AI辅助开发实战：用Python重做一个mini版Photoshop

最近技术社区和设计圈都在讨论一件事：Adobe 更新应用内许可条款后，不少开发者担心“用 AI 辅助开发软件”会撞上版权红线；随后 Adobe 官方人员在社区公开回应，表示不会对使用 AI 辅助开发的非商业开源替代品采取法律行动&#xff…

2026/10/14 21:38:32 阅读更多 →

日新闻

AnyPS5通用适配层设计：兼容性与性能的工程取舍

AnyPS5通用适配层设计：兼容性与性能的工程取舍

1. 从"AnyPS5"这个名字说起：它到底想解决什么问题第一次看到"AnyPS5"这个标题，我脑子里冒出来的第一个念头是：这大概率是一个围绕"跨平台运行"或者"通用适配"做文章的项目。名字里的"Any"…

2026/10/14 0:00:41 阅读更多 →
Flutter跨平台开发实战：二手交易应用与HarmonyOS适配

Flutter跨平台开发实战：二手交易应用与HarmonyOS适配

1. 项目概述：Flutter跨平台二手交易应用开发作为一名长期从事移动应用开发的工程师，我最近完成了一个基于Flutter框架的二手物品交易平台项目。这个项目最吸引我的地方在于它完美结合了Flutter的跨平台优势与HarmonyOS的生态特性，实现了"…

2026/10/14 0:00:41 阅读更多 →
DFS算法解决飞机降落调度问题实战

DFS算法解决飞机降落调度问题实战

1. 项目背景与核心思路飞机降落问题是一个经典的调度优化场景，也是算法竞赛和面试中的高频题目。这个题目要求我们合理安排多架飞机的降落顺序和时间，确保所有飞机都能安全着陆而不发生冲突。在实际航空管制中，这类问题直接关系到飞行安全和机…

2026/10/14 0:00:41 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/14 3:30:28 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/14 16:30:29 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/14 3:29:58 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 22:01:27 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 14:57:39 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/14 7:53:34 阅读更多 →