企业官网建设流程全解析

Material 3主题设计：Timeline Visualizer的浅色主题与自适应图标

【免费下载链接】google-timeline-visualizerVisualize your year in travel using your Google Location History (Timeline) data项目地址: https://gitcode.com/GitHub_Trending/go/google-timeline-visualizer

Timeline Visualizer是一款能把 Google 位置历史（Timeline）数据变成旅行视频的开源工具，它的界面基于 Material 3 主题设计构建：浅色主题为默认外观，深色主题随系统自动切换，桌面图标则采用 Android 自适应图标规范，在不同设备、不同壁纸下都能保持一致的视觉识别度。

浅色主题：一套粉色调的 Material 3 色板

Material 3（Material You）强调「由主题色板驱动 UI」。Timeline Visualizer 的浅色主题定义在 themes.xml 中，父主题为Theme.Material3.Light.NoActionBar，关键色值则集中在 colors.xml：

可以看到，整张色板都围绕品牌玫红做了低饱和度的派生：背景不是纯白而是#FFF8FA的粉白，容器底色#F7EEF1再深一档，形成 Material 3 推崇的「表面层级（surface tonal elevation）」——不用阴影，仅靠色阶区分卡片与背景。

几个值得学习的小细节：

• 状态栏配色：android:windowLightStatusBar设为true，浅色背景上使用深色状态栏图标，保证顶部文字可读。
• 底部导航字体：单独定义了BottomNavigationTextAppearance（11sp），基于 Material 3 的LabelMedium字阶微调，小屏上更紧凑。
• 品牌色复用：引导页路线色onboarding_route直接复用#E90064，品牌色贯穿启动页到主界面。

深色主题：同一套主题，自动切换

深色主题放在 values-night/themes.xml，父主题换成Theme.Material3.Dark.NoActionBar，但属性名完全一致（colorPrimary、colorSurface……），只是引用了 values-night/colors.xml 里的一组夜色值：

• 交互色从#D0005A提亮为#FFB1C8（浅粉），在深色背景上更醒目；
• 表面色换成#1B1115的近黑暖调，容器为#281B20；
• android:windowLightStatusBar改为false，状态栏图标反转为浅色。

这就是 Material 3 主题设计的精髓：主题结构只写一份，颜色资源按values/values-night两套目录自动匹配，开发者无需在代码里判断白天黑夜。

自适应图标：一张「手绘地图」的多层结构

Timeline Visualizer 的桌面图标遵循 Android 的自适应图标（Adaptive Icon）规范，入口是 mipmap-anydpi-v26/ic_launcher.xml，由三层组成：

1. 背景层ic_launcher_background：纯色#FFF8FA，与浅色主题背景一致；
2. 前景层ic_launcher_foreground.xml：一幅手绘风格的小地图——米色街区块面、一条玫红#E90064的旅行路线，以及一枚定位图钉，正是「用位置历史可视化旅行」这一功能的图形化表达；
3. 单色层ic_launcher_monochrome.xml：仅用黑色描边勾勒地图、路线与图钉轮廓，供 Android 13+ 的「主题图标」功能使用——系统可把它染成壁纸主题色。

兼容旧设备也不遗漏：mipmap-anydpi/ic_launcher.xml 与 drawable/ic_launcher.xml 提供了 108dp 的静态矢量图标，Android 7.x 及以下同样能显示完整图案。

💡设计要点：自适应图标的前景必须控制在外框 66dp 的安全区内（108dp 画布的中心区域），这样圆形、圆角方形等各种图标掩罩裁剪后，地图与路线都不会被切掉。

快速上手：克隆仓库查看主题资源

想亲手翻一翻这套 Material 3 主题设计，可以克隆仓库后浏览app/src/main/res/下的资源目录：

git clone https://gitcode.com/GitHub_Trending/go/google-timeline-visualizer

建议按以下路径阅读：

• 主题定义：app/src/main/res/values/themes.xml
• 浅色色板：app/src/main/res/values/colors.xml
• 深色色板：app/src/main/res/values-night/colors.xml
• 图标组合：app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
• 品牌规范文档：docs/brand.md

小结

Timeline Visualizer 的主题设计展示了 Material 3 在小型项目中的落地范式：

• 🎨一套色板两个世界：浅色粉白 + 深色暖黑，靠values/values-night目录自动切换；
• 🗂️主题属性结构统一：深浅两套主题属性名一致，只换颜色引用，维护成本极低；
• 🧩三层自适应图标：背景、前景、单色分层，兼容从 Android 7 到 13+ 的全部设备与主题图标功能。

对新手来说，这套「色板先行、目录切换、图标分层」的做法，几乎可以直接照搬到你自己的 App 主题设计中。

【免费下载链接】google-timeline-visualizerVisualize your year in travel using your Google Location History (Timeline) data项目地址: https://gitcode.com/GitHub_Trending/go/google-timeline-visualizer