Spotube 主题与色调——固定色板 + 自定义 accent
主题系统
Spotube 的主题在 v5.x 里做了重构——从单一预设色升级为固定色板 + 可自定义 accent。这是 Flutter ThemeData 驱动的,跨平台一致。
6 种预设主题
Spotube 内置 6 种主色,每种同时提供亮色和暗色变体:
| 预设名 | 主色 | 风格 |
|---|---|---|
| Spotube Purple | 紫色 #7C3AED | 默认,品牌色 |
| Midnight Blue | 深蓝 #1D4ED8 | 深夜听音乐感 |
| Forest Green | 森林绿 #059669 | 自然清新 |
| Sunset Orange | 日落橙 #EA580C | 暖色活力 |
| Rose Pink | 玫瑰粉 #E11D48 | 柔和浪漫 |
| Slate Gray | 石板灰 #475569 | 极简中性 |
自定义 accent
Spotube 设置 → Theme → Custom accent:
- 内置取色器(HSL / RGB / HEX 三种输入)
- 可以预览按钮、进度条、选中状态、爱心等控件的实时效果
- 设置后立即生效,不需要重启
暗色 / 亮色模式
三个选项:
- 跟随系统(默认)→ 随 OS 自动切换
- 始终暗色 → 适合夜间 / OLED 屏(Spotube 暗色主题是纯黑 #000000 + 深紫 accent,OLED 友好)
- 始终亮色 → 适合白天强光环境
Spotube 没有做自动"日落切换"或自定义时间段切换——跟随系统就够了。
Spotify Green 色?
如果你已经连了 Spotify 账号,Spotube 会额外提供一个 Spotify Green 选项(#1DB954)。这是 Spotify 的品牌色,Spotube 特意给连了 Spotify 的用户开了"更像 Spotify 的感觉"的选项。
布局密度
Spotube 设置 → Theme → Density:
- 紧凑(Compact) → 桌面端多显示一些曲目行
- 标准(Standard) → 默认
- 宽松(Comfortable) → 移动端默认,触控区域更大
桌面端还能自定义字体大小(10 ~ 22px)。
封面图自动调色
Spotube 的 UI 会自动从当前播放曲目的专辑封面提取主色调,把它用作播放页的背景渐变——这是 palette_generator 包在起作用:
- 当前播放页顶部会根据封面主色做渐变
- 播放列表页的封面也会有对应色调的柔和发光效果
- 专辑封面颜色影响播放页"此刻正在播放"卡片的色调
可以在设置里关闭这个效果(有些人觉得会分心)。
自定义启动屏
v5.1.0 起允许自定义启动屏:
- Spotube 设置 → Theme → Splash screen
- 选一张本地图片或纯色
- 可选:显示 logo + 版本号
- 适合想做品牌化分享或个性化定制的用户
主题设置的存储位置
Spotube 把主题配置(主色 / 暗色模式 / 字体 / 布局密度 / 自定义 accent)存在 shared_preferences 里:
- Windows:
%APPDATA%\Spotube\preferences - macOS:
~/Library/Application Support/Spotube/preferences - Linux:
~/.local/share/spotube/preferences - Android/iOS: 应用私有目录
备份 preferences 可以在设备间恢复主题设置。