壁纸驱动的动态取色 — 换壁纸即换装
Material You 是什么
Material You(原名 Material Design 3)是 Google 在 Android 12 上引入的设计语言核心特性之一——壁纸驱动的动态色彩:
- 用户的手机壁纸是应用配色的种子
- 系统从壁纸里提取若干种颜色作为调色板
- 所有应用(如果实现了 Material You API)都从这个调色板里取色
- 用户换壁纸,所有应用的 UI 颜色自动同步更新
Gloom 是 Material You 的早期积极实现者——MateriiApps 整个系列(Gloom、Upvote、Unbound 等)都是完整的 Material You 应用。
换壁纸 → Gloom 界面同步变色
具体效果:
| 壁纸主色 | Gloom 界面效果 |
|---|---|
| 暖紫、薰衣草色调 | 按钮、卡片底色变成紫色系的深浅色 |
| 绿色、薄荷色调 | 整屏冷青色基调 |
| 蓝色、靛蓝色调 | 海蓝系配色 |
| 红色、橙色调 | 暖红系 |
| 深色壁纸 | 动态取色会提取高亮色作为 accent |
Gloom 里哪些元素跟壁纸联动
Gloom 的 Material You 取色实现覆盖了几乎所有可视觉感知的界面元素:
按钮
- 顶部导航栏的 Tab 选中色
- 底部操作栏的图标高亮色
- 各种对话框里的「确认」「取消」按钮
卡片
- 首页 Activity Feed 的卡片边框和阴影
- 仓库详情页的统计数字卡片背景
- Issue/PR 评论卡片的底色
图标
- 应用内的各种功能图标(从 Material Symbols 库取色着色)
- 系统通知栏里 Gloom 的小图标
代码高亮
Gloom 的代码高亮配色也会参考 Material You 的 color scheme,让代码高亮和界面主色协调。
动态取色 vs 固定品牌色
传统应用做法是用一组固定品牌色(蓝色、绿色、橙色等)贯穿整个应用——比如 Twitter 的蓝色、Spotify 的绿色、微信的白绿。Material You 的做法是应用没有固定品牌色,颜色由用户自己的壁纸决定。
Gloom 选择 Material You 而不是固定品牌色,是 MateriiApps 的整个系列设计语言——他们所有应用都走这条路。
Android 版本的差异
Android 12 是 Material You API 的起始版本,但不同系统版本在取色能力上有细微差异:
- Android 12:基础动态取色能力(从壁纸提取 4 种颜色生成调色板)
- Android 13:增加了基于用户选择的「基础色 + 动态色」切换
- Android 14:引入了更精细的色板生成算法
- Android 15+:进一步优化深色模式下的对比度
没有壁纸取色的系统怎么办
Android 11 及以下不提供 Material You 动态取色 API。在这些系统上:
- Gloom 会回退到一套内置配色
- 内置配色是精心设计的中性方案,不是 Material You 动态色,但功能完整
- 能正常使用,只是少了壁纸联动这层视觉特色
Gloom 是怎么实现的
Gloom 完全用 Kotlin 写,Android 原生 Material You API 封装在 Jetpack Compose 的 Material 3 组件里——Gloom 用 Compose 实现整个 UI 层,所以动态取色是零成本接入,不需要额外代码。这也是为什么 Gloom 的取色体验比很多老 View 系统写的应用更流畅——因为它从一开始就是为 Compose 设计的。