前端【免费下载链接】spicetify-themesA community-driven collection of themes for customizing Spotify through Spicetify - https://github.com/spicetify/cli项目地址https://gitcode.com/GitHub_Trending/sp/spicetify-themes点击查看免费下载Ziro 是 spicetify-themes 社区主题集合中一款设计语言极为统一、风格平滑圆润的 Spotify 美化主题其灵感来自 [Zorin OS 的 GTK 主题]设计语言与 spot 类播放器界面的克制配色。本文以 Ziro/README.md 为主线结合仓库内真实的 color.ini16 套完整配色方案与 user.css586 行核心样式逐层拆解读者将掌握 Ziro 的配色体系与切换方式、每个颜色变量的 UI 映射关系以及如何通过改色与改圆角变量定制出属于自己的 Ziro 变体。一、Ziro 主题概览设计来源与风格定位根据 Ziro/README.md 的说明Ziro 受两处设计启发Zorin OS 的 GTK 桌面主题贡献了扁平 圆角 低饱和度的现代桌面质感这也是 Ziro 大量使用border-radius圆角变量、隐藏阴影的根源spot 播放器贡献了紧凑、克制、以内容为中心的布局思路。在 manifest.json 中Ziro 的官方描述为a smooth theme inspired by zorin os一个受 Zorin OS 启发的平滑主题作者为 schnensch0主题目录包含user.css与color.ini两个核心文件属于标记为latest适配最新版 Spicetify的主题。Ziro 的视觉语言可以概括为三点单一底色背景main、sidebar、player 三区同色消除 Spotify 默认的分区色差、卡片化内容区所有卡片、菜单、输入框统一使用card色与圆角、强统一的强调色selected-row、button、tab-active 等交互状态共用同一强调色。二、16 套配色方案明暗 × 色相的双轴矩阵README 以截图形式展示了 Ziro 的多种配色而真正完整的配色清单保存在 color.ini 中共16 个[scheme]段呈6 种色相 × 明暗两版 4 套第三方流行配色的矩阵结构色相系深色版浅色版Blue蓝[blue-dark][blue-light]Gray灰[gray-dark][gray-light]Green绿[green-dark][green-light]Orange橙[orange-dark][orange-light]Purple紫[purple-dark][purple-light]Red红[red-dark][red-light]此外还有 4 套社区流行配色Rose Pine三件套[rose-pine]、[rose-pine-moon]、[rose-pine-dawn]分别对应暗、中暗、亮三个亮度档以及[tokyo-night]东京之夜。以[blue-dark]为例一套完整 scheme 的定义如下见 color.ini[blue-dark] text bde6fb subtext 6d8692 main 1e2529 sidebar 1e2529 player 1e2529 card 171d20 shadow 171d20 selected-row bde6fb button bde6fb button-active bde6fb button-disabled 2a3439 tab-active bde6fb notification 171d20 notification-error fb7c7c misc 1e2529可以清晰看出 Ziro 的配色纪律main / sidebar / player 三者取值完全一致背景同色selected-row / button / button-active / tab-active 四者共享同一强调色本方案中为浅蓝bde6fbcard 与 shadow 同为卡片底色。浅色版如[blue-light]见 color.ini则把底色切换到f5f7fa/ffffff强调色换成高饱和的22c5fd文本变为深蓝123354。Rose Pine 系列忠实还原了 Rose Pine 官方调色板[rose-pine]主色191724、强调色ebbcba[rose-pine-moon]底色提亮至232136[rose-pine-dawn]则为米白底f2e9e1配砖红d7827e详见 color.ini。[tokyo-night]则使用242638深底与B5B9D6亮文本见 color.ini注意它的大写十六进制写法同样被 Spicetify 接受。三、color.ini 变量映射每个颜色管哪块 UIcolor.ini 文件头部的注释是理解 Ziro 配色逻辑的官方字典逐条展开如下变量作用的 UI 区域main/sidebar/player三处背景主内容区、左侧导航栏、底部播放栏card卡片、歌曲列表tracklist、下拉菜单、输入框的背景shadow按钮上的文字色、激活的 Tab 文字色、选中行的文字色与selected-row背景搭配形成对比selected-row选中歌曲行与激活 Tab 的背景button-active播放按钮主播放/暂停键、聚焦输入框的外轮廓button其余所有普通按钮button-disabled音量条与进度条背景、滚动条滑块、边框、悬停背景tab-active激活的 Tab 标签背景notification/notification-error通知弹窗背景 / 错误通知misc其余杂项这套映射在 user.css 中可以直接找到证据例如卡片背景.main-card-card使用var(--spice-card)user.css进度条底色.x-progressBar-progressBarBg使用var(--spice-button-disabled)user.cssTab 激活态.oaNVBli46GtVjaQKB15g等使用background: var(--spice-tab-active)user.css。注意Spicetify 会把color.ini中的键名自动转成--spice-key形式的 CSS 变量如main对应--spice-main并在user.css中引用同时还会派生--spice-rgb-keyRGB 三元组形式供rgba()使用如 user.css 中的rgba(var(--spice-rgb-card), 1)。四、安装与切换一条命令换肤Ziro 的使用方式与其他 Spicetify 主题完全一致官方流程如下克隆仓库并拷贝主题目录Linux/macOSgit clone --depth1 仓库地址 cd spicetify-themes cp -r * ~/.config/spicetify/ThemesWindows PowerShell 用户使用cp * $(spicetify -c | Split-Path)\Themes\ -Recurse应用 Ziro 主题spicetify config current_theme Ziro切换配色方案主题内置 16 套任选其一spicetify config color_scheme blue-dark spicetify config color_scheme rose-pine-dawn让配置生效spicetify apply注意事项来自仓库根 README.mdZiro 及本仓库所有主题要求最新版 Spotify 与 SpicetifyDribbblish、Turntable 等带 JS 的主题需按各自 README 额外操作而 Ziro 仅由user.csscolor.ini组成属纯 CSS 主题安装即为完整生效官方不支持 ad-block 修改版 Spotify请使用官方客户端。五、user.css 源码拆解Ziro 的平滑感从何而来user.css 全文件 586 行是 Ziro 观感的真正实现层。它的设计手法高度模式化适合作为自定义 Spicetify 主题的样板。5.1 全局设计令牌圆角与滚动条文件开头的:root定义了全局设计令牌user.css:root { --br-1: 10px; /* 大圆角卡片、菜单、tracklist */ --br-2: 8px; /* 小圆角按钮、输入框、滚动条滑块 */ --scrollbar: unset; /* 默认隐藏滚动条 */ --spice-main-elevated: var(--spice-main); --spice-highlight: var(--spice-button-disabled); --spice-highlight-elevated: var(--spice-card); }其中--br-1/--br-2两个圆角令牌贯穿全文件卡片用--br-1按钮与输入框用--br-2封面图则取calc(var(--br-2) / 2)user.css。同时* { box-shadow: none !important; }user.css全局移除阴影这正是 Ziro 扁平感的来源。5.2 背景统一与导航栏隐藏首页 Header、实体页渐变背景与操作栏背景user.css让内容区、顶栏、导航栏统一为var(--spice-main)导航栏激活项使用color: var(--spice-shadow); background: var(--spice-selected-row)user.css与 color.ini 的selected-row/shadow变量语义一一对应侧边栏列表项统一为--br-1圆角悬停时以--spice-button-disabled做背景反馈user.css。5.3 播放器自定义滑块与进度条Ziro 对底部播放栏做了精细重排user.css进度条被绝对定位到底部上方bottom: 82px时间文本右移并借助::after { content: / }拼出已播放 / 总时长格式user.css滑块.progress-bar__slider改为 16px 圆点border: 2px solid var(--bar)悬停时进度条加高到 8pxuser.css播放栏按钮统一着色为var(--spice-button)主播放/暂停键则反转为var(--spice-shadow)文字色user.css。5.4 歌曲列表与正在播放动画歌曲列表被整体放进--spice-card背景的圆角容器user.css选中行以--spice-tab-active高亮、文字反白为--spice-shadow。最有辨识度的是播放中动画图标通过内联 SVG CSS keyframesplay让四根声柱以不同延迟-0.51s、0s、-0.15s、-0.75s做 scaleY 动画再用-webkit-mask-image把它作为遮罩、以var(--spice-text)填充上色user.css——这种做法让动画图标自动适配任意配色。5.5 其余细节歌词、全屏、Marketplace歌词页显式覆盖--lyrics-color-active/inactive/passed/messaging四个变量并去掉歌词背景图user.css全屏模式Now Playing View跨淡出封面采用calc(var(--br-1) * 3)的大圆角up-next 面板改为 card 底色圆角卡user.css设置开关toggle 滑块被改为 18px 圆点并用--spice-shadow上色user.css对 Spicetify Marketplace 扩展的 Tab、卡片、设置按钮均做了配色适配user.css说明 Ziro 对第三方生态保持兼容。六、定制你的 Ziro 变体改色、改圆角基于以上结构定制 Ziro 只需两步且不需要修改任何 CSS 逻辑新增配色在 color.ini 中追加一个[my-scheme]段仿照上文的 15 个变量定义颜色然后执行spicetify config color_scheme my-scheme spicetify apply调整圆角与滚动条在 user.css 的:root中覆盖--br-1如24px更圆润、--br-2或将--scrollbar改为unset之外的值如恢复默认即可全局生效。注意Ziro 的强调色联动selected-row / button / button-active / tab-active 同色是保持观感统一的关键若只改其中一两个变量会出现按钮与选中态脱色建议成套调整。七、结语Ziro 的价值在于它把变量即设计系统的思想贯彻到了极致color.ini 用 16 套 15 变量方案覆盖明暗 × 色相的全部组合user.css 则用--br-1/--br-2两个圆角令牌和统一的--spice-*变量引用让任何配色方案都能无缝套用到同一套圆角布局上。如果你想在社区主题中选一款改色成本最低、设计语言最自洽的方案Ziro 是极佳的起点若需要查看全部主题的整体预览可参考 THEMES.md 中的 Ziro 专区。赞分享前端【免费下载链接】spicetify-themesA community-driven collection of themes for customizing Spotify through Spicetify - https://github.com/spicetify/cli项目地址https://gitcode.com/GitHub_Trending/sp/spicetify-themes点击查看免费下载相关推荐astryx Neutral 主题实战指南安装、调色板体系与源码级主题定制解析astryx Neutral 主题实战指南安装、调色板体系与源码级主题定制解析 本文基于仓库文档 packages/themes/neutral/README设计系统UI组件前端MMPose 服装关键点检测实战基于 DeepFashion2 数据集的 ResNet-50 热图方案MMPose 服装关键点检测实战基于 DeepFashion2 数据集的 ResNet 50 热图方案 本篇技术指南聚焦 OpenMMLab 姿态估计工具箱前端掌握spicetify-cli颜色系统color.ini配置的终极指南掌握spicetify cli颜色系统color.ini配置的终极指南 spicetify cli是一款强大的命令行工具用于自定义Spotify客户端界面开发工具CLI上一篇QMK 固件中的 city42RP2040 一体式矮轴分体键盘的移植与编译实践指南下一篇ESP-BLE-UART Vibe Indicator用 JSONL 协议驱动红黄绿灯语反馈的 ESP-IDF 示例解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考