【开源鸿蒙跨平台开发训练营】Flutter框架鸿蒙应用深色模式适配

为适应鸿蒙设备的深色模式，项目中加入多种风格模式的切换，增强用户体验

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

鸿蒙系统（HarmonyOS）支持深色模式（Dark Mode），而Flutter作为跨平台框架，需通过适配确保应用在鸿蒙设备上能无缝切换深色与浅色主题。

功能实现 - 03：深色模式与外观切换

目标：全应用适配深色模式，并在设置中提供外观切换（跟随系统 / 浅色 / 深色），选择结果持久化并在下次启动时生效。
方案：
- 在 main.dart 中定义亮色、深色两套 ThemeData（Material 3 ColorScheme），通过 MaterialApp 的 theme、darkTheme、themeMode 驱动全局外观。
- 使用 ValueNotifier<ThemeMode> 作为全局主题状态，与 SettingsService 持久化联动；设置页通过底部弹层选择模式并更新 Notifier，触发整应用重建。
- 将各页中的硬编码颜色（如 Colors.grey[600]）替换为 Theme.of(context).colorScheme 中的语义色，使列表、设置、发现、消息、收藏等页面在深色模式下自动呈现合适对比度。

无新增依赖 。沿用现有 shared_preferences（SettingsService）与 Flutter 内置 ThemeData / ThemeMode。

文件：lib/services/settings_service.dart

新增存储键：_keyThemeMode = 'settings_theme_mode'，取值：'light' / 'dark' / 'system'。
新增方法：
- Future<ThemeMode> getThemeMode()：读取本地存储，默认 ThemeMode.system。
- Future<void> setThemeMode(ThemeMode mode)：写入并持久化。

文件：lib/main.dart

启动流程 ：main() 改为 async，在 runApp 前调用 SettingsService().getThemeMode() 得到初始模式，并创建 appThemeModeNotifier = ValueNotifier<ThemeMode>(initialThemeMode)。
主题定义 ：
- _lightTheme：ColorScheme.fromSeed(seedColor: Colors.deepPurple, brightness: Brightness.light)，浅色背景与对比色。
- _darkTheme：ColorScheme.fromSeed(..., brightness: Brightness.dark)，深色表面色（如 #1C1B1F）与浅色前景。
MaterialApp ：使用 ValueListenableBuilder<ThemeMode> 包裹，根据 appThemeModeNotifier 的当前值设置 themeMode，并同时传入 theme、darkTheme，实现即时切换且与系统深色模式解耦（当选择「跟随系统」时，Flutter 会按系统 brightness 自动选用 light/dark 主题）。

文件：lib/pages/profile_page.dart

在「设置」二级页的 ListView 顶部增加 「外观」 入口：
- 标题：外观；副标题：当前模式文案（跟随系统 / 浅色 / 深色），通过 ValueListenableBuilder<ThemeMode> 与 appThemeModeNotifier 同步更新。
- 点击后弹出 底部弹层 （showModalBottomSheet），内为三个 RadioListTile<ThemeMode>：跟随系统、浅色、深色。
选择某一项后关闭弹层，若与当前模式不同则：
- 更新 appThemeModeNotifier.value；
- 调用 SettingsService().setThemeMode(chosen) 持久化。
弹层内同样使用 ValueListenableBuilder<ThemeMode>，保证单选项与当前模式一致。

以下页面将原先的 Colors.grey[*]、固定黑白等替换为 Theme.of(context).colorScheme 的语义色，以便在深色模式下自动获得合适对比度：

文件	修改要点
`root_page.dart`	底部导航未选中色：`Colors.grey` → `colorScheme.onSurfaceVariant`
`profile_page.dart`	统计/菜单副标题、历史记录空状态与列表占位/副标题：`Colors.grey[600]`、`Colors.grey[300]` 等 → `onSurfaceVariant`、`surfaceContainerHighest`
`search_page.dart`	搜索框 hint/前缀图标、空状态图标与文案、卡片占位与作者/点赞文案：→ `onSurfaceVariant`、`surfaceContainerHighest`、`surfaceContainerHigh`
`favorites_page.dart`	空状态图标与文案、列表占位与副标题：→ `onSurfaceVariant`、`surfaceContainerHighest`
`messages_page.dart`	空状态、会话列表副标题与时间、输入栏阴影、发送按钮图标：→ `onSurfaceVariant`、`colorScheme.shadow`、`onPrimary`
`privacy_settings_page.dart`	隐私/用户协议/账号安全正文：`Colors.grey[700]` → `onSurfaceVariant`

未改动的部分（刻意保留）：

首页（home_page） 、作品详情（work_detail_page） 中全屏图片浏览区域使用黑色背景与白色叠加文字/控件，属于内容展示设计，不随浅/深主题切换，以保持沉浸式看图体验。
network_image_widget 等图片占位与叠加层仍使用深底浅字，与上述一致。

文件	变更类型
`lib/services/settings_service.dart`	新增 `getThemeMode` / `setThemeMode`，引入 `flutter/material.dart`
`lib/main.dart`	异步启动、`appThemeModeNotifier`、亮/暗主题定义、`ValueListenableBuilder` + `themeMode`
`lib/pages/profile_page.dart`	设置页增加「外观」入口、底部弹层选择、`_themeModeLabel` / `_showThemeModePicker`；列表与历史页颜色改为 theme 语义色
`lib/pages/root_page.dart`	未选中色改为 `onSurfaceVariant`
`lib/pages/search_page.dart`	搜索框、空状态、卡片内文案与占位改为 theme 语义色
`lib/pages/favorites_page.dart`	空状态与列表占位/副标题改为 theme 语义色
`lib/pages/messages_page.dart`	空状态、列表副标题/时间、输入区阴影、发送图标改为 theme 语义色
`lib/pages/privacy_settings_page.dart`	正文颜色改为 `onSurfaceVariant`

感谢阅读本帖，如对贴中内容有意见和建议的，欢迎与我联系交流，也欢迎加入开源鸿蒙跨平台社区：