AstroBox 中文文档 下载 App

浅色模式与 MD3 主题系统——跟系统自动切换 + 自定义配色

从旧版到 MD3 主题

AstroBox 2.0 版本只有深色模式。2.1 版本进行了彻底的主题系统重构：

特性2.02.1+
浅色模式❌✅
跟系统自动切换❌✅
MD3 配色系统❌✅
自定义主题色❌✅
图片生成配色❌✅
深浅色切换动效❌✅（View Transitions）

浅色模式

开启方式

默认行为：跟随系统——系统是浅色，AstroBox 就是浅色；系统是深色，AstroBox 就是深色。

手动切换：在 AstroBox 设置 → 外观 → 主题模式：

2.1 修复的 Bug

2.0 版本有个已知问题：iOS 上跟随系统深浅色，每次打开都是浅色。2.1 版本修复了这个 bug，同时修复了 macOS 深浅色切换时红绿灯按钮位置漂移（用 watchdog 常驻校准）。

MD3 主题系统

AstroBox 2.1 起基于 Material Design 3 配色系统。MD3 是 Google 最新的设计系统，特点：

自选主题色

  1. 设置 → 外观 → 主题色
  2. 选择一个基础色（红、橙、黄、绿、蓝、紫、灰等）
  3. AstroBox 自动生成完整的 MD3 调色板（深浅色两套）
  4. 选一个你喜欢的颜色即可

从图片生成配色（最酷的功能）

这是 MD3 的精髓——你可以上传一张图（照片、壁纸、任何图片），AstroBox 会自动从图片里提取主色调，生成一套主题配色。

使用场景：

效果：整个 AstroBox 的颜色都跟着图片走了。

2.1 版本新增的其他 UI 改进

深浅色切换动效

使用 View Transitions API——切换深浅色时有平滑的淡化过渡，不是硬切。

导航栏样式

底部 Tab 紧凑模式

手机端底部 Tab 栏可以切换紧凑模式，在小屏幕上能省一点空间。

跟系统字体缩放的兼容

2.1 版本修复了系统字体缩放导致的布局异常——通过锁定根字号，让 AstroBox 内部自己控制元素大小，不被系统放大/缩小影响。

页面级别的视觉改进

主题设置位置

所有外观相关设置集中在：