本文档介绍了 AppFlowy 的主题和外观系统，该系统在移动和桌面平台之间提供一致的视觉样式，同时适应特定于平台的设计模式。该系统管理颜色、排版、组件样式以及亮/暗模式变体。
有关 UI 导航组件的信息，请参阅导航和侧边栏系统。有关移动端特有平台适配的信息，请参阅移动平台集成。
AppFlowy 的主题系统采用平台感知架构，为移动端和桌面端提供不同的实现，同时共享通用的样式基础。该系统通过自定义扩展来扩展 Flutter 原生 ThemeData，以支持 AppFlowy 特定的设计令牌。
来源：frontend/appflowy_flutter/lib/workspace/application/settings/appearance/base_appearance.dart frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart9-10 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart7-8
移动端主题系统使用针对移动界面优化的硬编码颜色值，并在 iOS 和 Android 平台之间提供一致的样式。
移动端实现定义了特定的颜色常量并创建了平台优化的组件样式
| 组件 | 浅色主题 | 深色主题 | 用途 |
|---|---|---|---|
| 主要 | #00BCF0 | #00BCF0 | 主强调色 |
| 背景 | #FFFFFF | #121212 | 屏幕背景 |
| 表面 | #FFFFFF | #171A1F | 卡片/面板表面 |
| 主文本 | #2F3030 | #FFFFFF | 主文本内容 |
| 次文本 | #676666 | #C5C6C7 | 次要文本 |
来源：frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart10-15 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart36-72 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart77-106
桌面端主题系统通过与 AppFlowy 综合主题系统的集成，提供更大的灵活性，支持多种主题变体和高级自定义选项。
来源：frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart19-21 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart22-48 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart83-93
AppFlowy 通过自定义扩展来扩展 Flutter 的主题系统，这些扩展提供了应用程序特定的设计令牌和样式属性。
AFThemeExtension 提供了在整个应用程序中使用的自定义属性
来源：frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart235-279 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart108-155
应用程序中的组件使用标准的 Flutter 模式结合 AppFlowy 的自定义扩展来访问主题属性。
组件使用 Theme.of(context) 访问 Flutter 的内置主题属性。
AppFlowy 特定的主题属性通过主题扩展系统访问
来源：frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/mobile_board_trailing.dart30 frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart53-54 frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/snap_bar.dart12-13
主题系统在保持品牌一致性的同时适应平台约定
| 方面 | 移动端 | 桌面 | 原理 |
|---|---|---|---|
| 颜色值 | 硬编码常量 | 基于主题的映射 | 移动端需要一致的品牌，桌面端支持主题变体 |
| 按钮高度 | 固定 48 像素高度 | 基于内容可变 | 移动端需要对触控友好的目标 |
| 排版比例 | 移动端优化尺寸 | 桌面端优化尺寸 | 不同的阅读距离和 DPI |
| 组件密度 | 触控优化间距 | 鼠标优化间距 | 不同的交互方式 |
| 滚动条样式 | 系统默认 | 自定义样式 | 桌面用户期望可见的滚动条 |
来源：frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart109 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart83-93
主题构建在不同平台遵循一致的模式
来源：frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart17-23 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart9-14