---
title: Spotify Ricing(Spicetify)
date: 2025-05-11
thumbnail: https://assets.vluv.space/cover/Ricing/catppuccin_logo.webp
cover: https://assets.vluv.space/cover/Ricing/cat-sound.webp
tags: [Spotify, CSS, Ricing, Catppuccin, Spicetify]
excerpt: 🤖 Transform your Spotify client with custom themes and extensions using Spicetify. This guide walks you through installing Spicetify CLI and Marketplace on Windows, Linux, and MacOS, helping you personalize your music streaming experience with beautiful themes and powerful add-ons. Elevate your desktop aesthetics with minimal effort!
updated: 2026-05-08 22:34:07
---

<script data-swup-reload-script type="module" src="/js/components/tab.js"></script>

## Introduction

今日无事，刷 Reddit 发现 Spicetify 可以给 Spotify 注入 CSS 和 JS，实现为 Spotify 添加主题和扩展功能。火速实践一下 🤓

> [!TLDR] TL; DR
>
> 1. Install Spicetify CLI
> 2. Install Spicetify Marketplace
> 3. Install your favorite theme

**Join Spicetify Discord Server**👉 [Discord](https://discord.com/invite/VnevqPp2Rr)

## Installation

<x-tabs>

<x-tab title="Windows" active>

This is the installation method we recommend for most users. It is the fastest and most reliable way to install Spicetify.

#### Powershell (pre-built binary)

```powershell
iwr -useb https://raw.githubusercontent.com/spicetify/cli/main/install.ps1 | iex
```

Also run the following if you would like to install the [**Spicetify Marketplace**](https://github.com/spicetify/marketplace), which gives you access to a tab in Spotify's sidebar that allows you to search for and install _themes_, _extensions_, and _snippets_.

```powershell
iwr -useb https://raw.githubusercontent.com/spicetify/marketplace/main/resources/install.ps1 | iex
```

</x-tab>

<x-tab title="Linux &amp; MacOS">

#### Shell (pre-built binary)

Spicetify CLI

```sh
curl -fsSL https://raw.githubusercontent.com/spicetify/cli/main/install.sh | sh
```

> [!NOTE]
>
> 在下载 Spicetify CLI 之后，需要手动在 shell profile 中添加环境变量，然后运行 `spicetify backup apply`命令。

Spicetify Marketplace

```sh
curl -fsSL https://raw.githubusercontent.com/spicetify/marketplace/main/resources/install.sh | sh
```

</x-tab>

</x-tabs>

## Theming

下载好 Specify CLI 和 Spicetify Marketplace 之后，打开 Spotify，点击左侧的 Spicetify Marketplace 图标，进入主题市场。
在这里你可以选择自己喜欢的主题，点击安装即可。

<img src="https://assets.vluv.space/spicetify.webp" alt="Spicetify"/>

## Preview

<div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;">
  <div style="flex: 1;">
    <img src="https://assets.vluv.space/spotify_preview1.webp" alt="Spotify"/>
  </div>
  <div style="flex: 1;">
    <img src="https://assets.vluv.space/spotify_preview_2.webp" alt="Spotify"/>
  </div>
</div>

在 Marketplace-Snippets 中，你可以注入自定义的 css，例如添加如下 CSS 代码，一个 TUI 风格的 Spotify 就完成了。

```css
/* user settings */

/*  ================================
    ROOT
    ================================ */

/* import */
/* find more in https://fonts.google.com/?category=Monospace&sort=popularity */
@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Cousine:ital,wght@0,400;0,700;1,400;1,700&family=Cutive+Mono&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Fira+Code:wght@300..700&family=Fira+Mono:wght@400;500;700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=M+PLUS+1+Code:wght@100..700&family=Nova+Mono&family=Overpass+Mono:wght@300..700&family=Oxygen+Mono&family=PT+Mono&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Share+Tech+Mono&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&family=Sono:wght@200..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne+Mono&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=VT323&family=Xanh+Mono:ital@0;1&display=swap");
@import url("https://fonts.cdnfonts.com/css/asciid");

/* user settings */
:root {
  --font-family: "Maple Mono NF CN", monospace !important;

  --font-size: 14px !important;
  --font-weight: 400 !important; /* 200 : 900 */
  --line-height: 1.2 !important;

  --font-size-lyrics: 14px !important; /* 1.5em (default) */

  --font-family-header: "asciid" !important;
  --font-size-multiplier-header: 4 !important;

  --display-card-image: block !important; /* none | block */
  --display-coverart-image: none !important; /* none | block */
  --display-header-image: none !important; /* none | block */
  --display-sidebar-image: block !important; /* none | block */
  --display-tracklist-image: none !important; /* none | block */
  --display-spicetify-banner-ascii: block !important; /* none | block */
  --display-music-banner-ascii: none !important; /* none | block */

  --border-radius: 0px !important;
  --border-width: 1px !important;
  --border-style: solid !important; /* dotted | dashed | solid | double | groove | ridge | inset | outset */
  --border-transition: 0.2s ease !important; /* 'none' to disable  */

  --global-nav-margin-top: 40px !important; /* set to '0px' if you disabled window controls */
}

/* font */
*:not([style*="lyric" i] *, [class*="lyric" i], .main-entityHeader-title) {
  font-family: var(--font-family) !important;
  font-size: var(--font-size) !important;
  font-weight: var(--font-weight) !important;
  line-height: var(--line-height) !important;
}
.lyrics-lyrics-container *,
.main-nowPlayingView-lyricsContent * {
  font-family: var(--font-family);
  font-size: var(--font-size-lyrics);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}
.main-entityHeader-title h1 {
  font-family: var(--font-family-header) !important;
  font-size: calc(
    var(--font-size) * var(--font-size-multiplier-header)
  ) !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* images */
.main-card-imageContainer img,
.view-homeShortcutsGrid-imageContainer img {
  display: var(--display-card-image) !important;
}
.main-coverSlotCollapsed-container {
  display: var(--display-coverart-image);
}
.main-entityHeader-imageContainer,
.under-main-view,
.main-entityHeader-creatorWrapper .main-avatar-avatar,
.main-entityHeader-imageContainer,
.playlist-playlist-playlistImageContainer,
.profile-userOverview-imageContainer {
  display: var(--display-header-image);
}
.x-entityImage-imageContainer img,
.main-avatar-image {
  display: var(--display-sidebar-image);
}
.main-trackList-rowImage {
  display: var(--display-tracklist-image);
}

/* fix */
.Root__globalNav {
  padding: 8px 16px !important;
  height: unset;
}
.spotify__container--is-desktop.spotify__os--is-windows .Root__globalNav,
.spotify__container--is-desktop.spotify__os--is-macos .Root__globalNav {
  margin: 0;
  margin-top: var(--global-nav-margin-top);
}
.spotify__container--is-desktop.spotify__os--is-linux .Root__globalNav {
  margin: 8px 0 0;
}
.Root__top-container {
  --panel-gap: 16px !important;
}
.Root__top-bar {
  border: var(--border-width) solid transparent;
}
.Root__nav-bar,
.Root__now-playing-bar {
  overflow: visible;
}
.main-view-container {
  overflow: hidden;
}
section:has(> .main-entityHeader-container),
div:has(> .main-entityHeader-container) {
  margin-top: 0;
}
.main-entityHeader-container {
  height: unset !important;
  min-height: unset !important;
}
.main-entityHeader-imageContainerNew {
  height: 128px;
  width: 128px;
}
.main-topBar-background {
  background-color: var(--spice-main);
}
.main-topBar-overlay,
.main-entityHeader-container > div,
.main-entityHeader-container + div[style*="background-color"],
.main-entityHeader-container + div > div[style*="background-color"],
.main-home-homeHeader,
.main-home-filterChipsSection,
.main-home-filterChipsSection::after,
.main-nowPlayingView-contextItemInfo::before {
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
}
.main-entityHeader-container + div,
.main-entityHeader-container + div > div {
  background: var(--spice-main);
}
.LayoutResizer__resize-bar {
  cursor: w-resize;
}
.LayoutResizer__inline-end:after,
.LayoutResizer__inline-start:after {
  background-color: var(--spice-border-inactive);
}
.LayoutResizer__resize-bar--resizing.LayoutResizer__inline-start:after,
.LayoutResizer__resize-bar--resizing.LayoutResizer__inline-end:after {
  background-color: var(--spice-border-active);
}

/* fullscreen */
.spotifyinternal-artistnpv .npv-what-is-playing .npv-cover-art,
.spotifyinternal-artistnpv .npv-what-is-playing .npv-track {
  bottom: 18em;
}
.spotifyinternal-artistnpv .npv-what-is-playing .npv-cover-art {
  -webkit-transform: scale(0.34375);
  transform: scale(0.34375);
}
.spotifyinternal-artistnpv .npv-what-is-playing .npv-track {
  -webkit-transform: none;
  transform: none;
}
.npv-main-container .playback-bar {
  position: unset;
  width: auto;
}
.npv-nowPlayingBar-controls {
  height: auto;
}

/* recolor */
:root {
  --spice-main-elevated: var(--spice-main);
  --spice-highlight-elevated: var(--spice-main);
  --spice-sidebar: var(--spice-main);
  --spice-player: var(--spice-main);
  --spice-card: var(--spice-main);
  --spice-shadow: var(--spice-main);
  --spice-selected-row: var(--spice-subtext);
  --spice-button: var(--spice-accent);
  --spice-button-active: var(--spice-accent-active);
  --spice-button-disabled: var(--spice-accent-inactive);
  --spice-tab-active: var(--spice-main);
  --spice-rgb-main-elevated: var(--spice-rgb-main);
  --spice-rgb-highlight-elevated: var(--spice-rgb-main);
  --spice-rgb-sidebar: var(--spice-rgb-main);
  --spice-rgb-player: var(--spice-rgb-main);
  --spice-rgb-card: var(--spice-rgb-main);
  --spice-rgb-shadow: var(--spice-rgb-main);
  --spice-rgb-selected-row: var(--spice-rgb-subtext);
  --spice-rgb-button: var(--spice-rgb-accent);
  --spice-rgb-button-active: var(--spice-rgb-accent-active);
  --spice-rgb-button-disabled: var(--spice-rgb-accent-inactive);
  --spice-rgb-tab-active: var(--spice-rgb-main);
}
.encore-dark-theme,
.encore-dark-theme .encore-base-set {
  --background-elevated-press: var(--spice-main-elevated);
  --essential-subdued: var(--spice-border-inactive);
  --decorative-subdued: var(--spice-accent-inactive);
}
.encore-dark-theme .encore-bright-accent-set {
  --background-highlight: var(--spice-button-active) !important;
  --background-elevated-base: var(--spice-button-active) !important;
  --background-elevated-highlight: var(--spice-button-active) !important;
  --background-press: var(--spice-button-active) !important;
  --background-elevated-press: var(--spice-button-active) !important;
}
.Root__top-container,
.Root__nav-bar {
  background-color: var(--spice-main);
}
.main-playPauseButton-button {
  background-color: transparent;
  color: var(--spice-subtext);
}
.main-playPauseButton-button:focus,
.main-playPauseButton-button:hover {
  transform: none;
  color: var(--spice-text);
}
#_R_G *:not([fill="none"]) {
  fill: var(--spice-button-active) !important;
}
#_R_G *:not([stroke="none"]) {
  stroke: var(--spice-button-active);
}
.view-homeShortcutsGrid-equaliser,
.main-devicePicker-nowPlayingActiveIcon,
.main-trackList-playingIcon {
  filter: grayscale(1) opacity(0.2) drop-shadow(
      0 0 0 var(--spice-button-active)
    ) drop-shadow(0 0 0 var(--spice-button-active)) drop-shadow(0 0 0 var(--spice-button-active));
}
::placeholder {
  color: var(--spice-subtext);
}
.main-entityHeader-background,
.main-entityHeader-backgroundColor,
.main-entityHeader-overlay,
.main-actionBarBackground-background,
.main-buddyFeed-container,
.main-nowPlayingView-content.main-nowPlayingView-gradient {
  background-color: transparent !important;
  background-image: none;
}
.progress-bar {
  --fg-color: var(--spice-button-active);
  --bg-color: var(--spice-button-disabled);
}
.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container {
  mix-blend-mode: difference;
  color: var(--spice-button-active);
}
.main-trackList-placeholder {
  background-color: var(--background-base);
  background-blend-mode: color-dodge;
}
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
  background: var(--spice-main);
}
.main-trackList-trackListRow:focus-within,
.main-trackList-trackListRow:hover,
.main-contextMenu-menuItemButton:hover,
.main-contextMenu-menuItemButton:not([aria-checked="true"]):focus,
.main-card-card:hover,
.main-card-card[data-context-menu-open="true"],
[class*="BoxComponent-group-card"]:hover::after,
[class*="BoxComponent-group-listRow"]:hover::after {
  background-color: rgba(var(--spice-rgb-highlight), 0.5);
}
.main-trackList-trackListRow.main-trackList-selected,
.main-trackList-trackListRow.main-trackList-selected:hover {
  background-color: var(--spice-highlight);
}
.x-entityImage-imageContainer,
.main-card-imageContainer > div:first-child {
  background-color: var(--card-color, var(--spice-border-inactive));
}
.main-avatar-avatar {
  background-color: var(--spice-border-inactive) !important;
}
.main-entityHeader-title h1 {
  color: var(--spice-banner);
}
div[style*="--text-subdued: rgba(255, 255, 255, 0.7);"] {
  --text-subdued: var(--spice-subtext) !important;
}
.search-searchCategory-contentArea {
  --carousel-start-chevron-gradient: var(--spice-main);
  --carousel-end-chevron-gradient: var(--spice-main);
}

/* pane borders */
.Root__globalNav,
.main-yourLibraryX-entryPoints,
.Root__main-view,
.Root__now-playing-bar,
.Root__right-sidebar:has(aside:not(:empty)) {
  border: var(--border-width) var(--border-style);
  border-color: var(--spice-border-inactive);
  border-radius: var(--border-radius);
  background-color: var(--spice-main);
  transition: border-color var(--border-transition);
}
.Root__globalNav:hover,
.main-yourLibraryX-entryPoints:hover,
.Root__main-view:hover,
.Root__now-playing-bar:hover,
.Root__right-sidebar:has(aside:not(:empty)):hover {
  border: var(--border-width) var(--border-style);
  border-color: var(--spice-border-active);
}

/* pane headers */
.Root__nav-bar .main-yourLibraryX-entryPoints {
  overflow-x: visible !important;
}
.Root__globalNav::before,
.main-globalNav-searchContainer
  form
  div:has(> .main-topBar-searchBar:focus)::before,
.Root__nav-bar
  .main-yourLibraryX-entryPoints:has(.main-yourLibraryX-navItems)::before,
.Root__nav-bar
  .main-yourLibraryX-entryPoints:has(.main-yourLibraryX-libraryContainer)::before,
.Root__main-view::before,
.Root__now-playing-bar::before,
.Root__right-sidebar:has(aside:not(:empty))::before {
  color: var(--spice-header);
  position: absolute;
  margin: -10px 4px;
  background: var(--spice-main);
  padding: 0 3px;
  z-index: 3;
  transition: color var(--border-transition);
}
.Root__globalNav::before {
  content: "Nav";
  top: 0;
  left: 0;
}
.main-globalNav-searchContainer
  form
  div:has(> .main-topBar-searchBar:focus)::before {
  content: "Search";
  color: var(--spice-border-active) !important;
}
.Root__nav-bar
  .main-yourLibraryX-entryPoints:has(.main-yourLibraryX-navItems)::before {
  content: "Pages";
}
.Root__nav-bar
  .main-yourLibraryX-entryPoints:has(.main-yourLibraryX-libraryContainer)::before {
  content: "Library";
}
.Root__main-view::before {
  content: "Main";
  position: fixed;
}
.Root__now-playing-bar::before {
  content: "Playing";
}
.Root__right-sidebar:has(aside:not(:empty))::before {
  content: "Sidebar";
}
.Root__globalNav:hover::before,
.Root__nav-bar .main-yourLibraryX-entryPoints:hover::before,
.Root__main-view:hover::before,
.Root__now-playing-bar:hover::before,
.Root__right-sidebar:has(aside:not(:empty)):hover::before {
  color: var(--spice-border-active);
}

/* scrollbars */
.os-scrollbar-handle {
  border-radius: var(--border-radius) !important;
  width: 2px !important;
  position: absolute;
  top: 0;
  right: 0;
}
.os-scrollbar-handle:hover {
  border-radius: var(--border-radius) !important;
  width: 6px !important;
}
.os-scrollbar-vertical {
  top: 5px !important;
  right: 5px !important;
}

/* context menus + tippy boxes */
.main-contextMenu-menu,
.tippy-box {
  border: var(--border-width) var(--border-style) var(--spice-border-active);
  border-radius: var(--border-radius) !important;
}

/* modals */
.GenericModal,
.GenericModal__overlay > div,
dialog {
  border: var(--border-width) var(--border-style) var(--spice-border-active);
  border-radius: var(--border-radius) !important;
  overflow: visible !important;
  box-shadow: 0 0 0 16px var(--spice-main);
}
.GenericModal::before,
.GenericModal__overlay > div::before,
dialog::before {
  content: "Modal";
  color: var(--spice-border-active);
  position: absolute;
  margin: -10px 4px;
  background: var(--spice-main);
  padding: 0 3px;
  z-index: 9;
}

/*  ================================
    GLOBAL NAV
    ================================ */

/* fix spacing */
.main-globalNav-historyButtonsContainer > div {
  gap: 0;
  -webkit-padding-start: 0;
  padding-inline-start: 0;
  -webkit-margin-start: 0;
  margin-inline-start: 0;
}
.main-globalNav-historyButtonsContainer > div > div:nth-child(1),
.Root__globalNav > div:nth-child(3) > div:nth-child(2) {
  height: 0;
  width: 0;
}
.Root__globalNav > div:nth-child(3) {
  -webkit-margin-end: 0;
  margin-inline-end: 0;
}
.main-globalNav-historyButtons {
  gap: 0 !important;
  padding-inline: 0 !important;
}
.main-globalNav-historyButtons > button {
  padding-inline: var(--encore-spacing-tighter, 12px);
}

/* icons */
.main-globalNav-historyButtonsContainer svg,
.main-globalNav-searchContainer svg {
  transform: scale(0.7);
}

/* search section */
.main-globalNav-searchSection,
.main-globalNav-searchContainer {
  align-items: center;
}
.main-globalNav-searchSection {
  position: unset;
  top: unset;
  left: unset;
}
.main-globalNav-searchContainer {
  max-width: unset;
  width: 100%;
}
.main-globalNav-searchContainer form .main-topBar-searchBar {
  border-radius: var(--border-radius);
  border: 1px solid;
  border-color: var(--spice-main);
}
.main-globalNav-searchContainer form:hover .main-topBar-searchBar {
  box-shadow: none;
  border: 1px solid;
  border-color: var(--spice-border-inactive);
}
.Root__globalNav:hover:has(.main-topBar-searchBar:focus) {
  border: var(--border-width) var(--border-style);
  border-color: var(--spice-border-inactive);
}
.Root__globalNav:hover:has(.main-topBar-searchBar:focus)::before {
  color: var(--spice-header);
}
.main-globalNav-searchContainer form .main-topBar-searchBar:focus {
  box-shadow: none;
  border: var(--border-width) var(--border-style);
  border-color: var(--spice-border-active);
  outline: 14px solid var(--spice-main);
}
.main-globalNav-searchContainer form #recent-searches-dropdown > div {
  border-radius: var(--border-radius);
  box-shadow: none;
  margin: 24.5px 0;
  border: var(--border-width) var(--border-style);
  border-color: var(--spice-border-active);
  outline: 14px solid var(--spice-main);
}
form .main-topBar-searchBar::placeholder,
form .main-topBar-searchBar:placeholder-shown {
  transition: none !important;
}

/*  ================================
    LEFT SIDEBAR
    ================================ */

/* pages pane */
.main-yourLibraryX-navLink {
  height: 24px;
  gap: 8px;
  text-decoration: none !important;
}
.main-yourLibraryX-navLink > svg,
.main-yourLibraryX-header .main-yourLibraryX-collapseButtonWrapper > span {
  transform: scale(0.7);
}

/* library pane */
.x-entityImage-imageContainer {
  transform: scale(0.7);
  background-color: transparent;
}
.x-entityImage-imageContainer::before {
  content: "░▒▒░";
  color: var(--spice-subtext);
  transform: scale(1.4);
  position: absolute;
  top: 50%;
  left: 20%;
  z-index: -1;
}
.main-yourLibraryX-filterArea {
  padding: 0 8px;
}
.main-yourLibraryX-libraryRootlist {
  padding: 0 16px 8px;
}
.main-yourLibraryX-listItem span.LineClamp {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

/* sidebar config */
.main-yourLibraryX-entryPoints:first-child:has(.main-yourLibraryX-navItems:empty) {
  display: none;
}

/*  ================================
    MAIN VIEW
    ================================ */

/* check out a cool project: https://github.com/Rigellute/spotify-tui

    _________  ____  / /_(_) __/_  __      / /___  __(_)\A
   / ___/ __ \\/ __ \\/ __/ / /_/ / / /_____/ __/ / / / /\A
  (__  ) /_/ / /_/ / /_/ / __/ /_/ /_____/ /_/ /_/ / /\A
 /____/ .___/\\____/\\__/_/_/  \\__, /      \\__/\\__,_/_/\A
     /_/                    /____/

*/
.view-homeShortcutsGrid-shortcuts::before {
  content: "   _________  ____  / /_(_) __/_  __      / /___  __(_)\A   / ___/ __ \\/ __ \\/ __/ / /_/ / / /_____/ __/ / / / /\A  (__  ) /_/ / /_/ / /_/ / __/ /_/ /_____/ /_/ /_/ / /\A /____/ .___/\\____/\\__/_/_/  \\__, /      \\__/\\__,_/_/\A     /_/                    /____/                      ";
  white-space: pre-wrap;
  padding: 32px 0;
  color: var(--spice-banner);
  line-height: 1.2;
  text-wrap: nowrap;
  display: var(--display-spicetify-banner-ascii);
}
.main-entityHeader-headerText::before {
  content: "────█▀█▄▄▄▄─────██▄\A────█▀▄▄▄▄█─────█▀▀█\A─▄▄▄█─────█──▄▄▄█\A██▀▄█─▄██▀█─███▀█\A─▀▀▀──▀█▄█▀─▀█▄█▀\A";
  white-space: pre-wrap;
  padding-bottom: 32px;
  color: var(--spice-banner);
  line-height: 1.2;
  text-wrap: nowrap;
  display: var(--display-music-banner-ascii);
}

/* top bar */
.marketplace-tabBar-active {
  text-decoration: underline !important;
}
.search-searchCategory-catergoryGrid *,
.main-shelf-subHeader *,
.ChipInnerComponent-sm,
.ChipInnerComponent-sm-selected {
  border-radius: var(--border-radius);
}

/* headers */
.main-entityHeader-container {
  padding: var(--content-spacing) 0;
}
.main-entityHeader-container.main-entityHeader-withBackgroundImage {
  background-image: radial-gradient(
    circle,
    rgba(var(--spice-rgb-main), 0.7) 0%,
    rgba(var(--spice-rgb-main), 0.9) 50%,
    rgba(var(--spice-rgb-main), 1) 100%
  );
}

/* lyrics page & sidebar */
.lyrics-lyrics-background {
  background-color: var(--spice-main);
}
.main-nowPlayingView-sectionHeaderSpacing.main-nowPlayingView-lyricsGradient {
  background-color: var(--background-tinted-base);
}
.lyrics-lyrics-contentContainer {
  justify-content: start;
}
.lyrics-lyrics-container,
.main-nowPlayingView-section {
  --lyrics-color-active: var(--spice-text) !important;
  --lyrics-color-inactive: var(--spice-subtext) !important;
  --lyrics-color-passed: var(--spice-subtext) !important;
  --lyrics-color-messaging: var(--spice-subtext) !important;
}
.lyrics-lyricsContent-lyric {
  opacity: 0.3;
  display: flex;
  flex-direction: row;
}
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-highlight {
  opacity: 0.7;
  transition: none;
}
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-active:not(:empty) {
  background-color: var(--lyrics-color-background);
  color: var(--spice-text);
  opacity: 1;
  transition: none;
}
.lyrics-lyricsContent-lyric:not(:empty)::before {
  content: ">> ";
  opacity: 0;
  white-space: break-spaces;
}
.lyrics-lyricsContent-lyric.lyrics-lyricsContent-active:not(:empty)::before {
  content: ">> ";
  opacity: 1;
  white-space: break-spaces;
}

/* lyrics cinema */
.Root__lyrics-cinema {
  border: var(--border-width) var(--border-style) transparent;
  overflow: hidden;
}
.main-nowPlayingView-lyricsContent {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/*  ================================
    PLAYBACK BAR
    ================================ */

/* playback bar itself */
.main-nowPlayingBar-nowPlayingBar {
  padding: 8px 8px 32px 8px;
  height: 96px;
}
.playback-bar {
  position: absolute;
  left: calc(var(--panel-gap) + 8px);
  bottom: calc(var(--panel-gap) + 8px);
  width: calc(100vw - var(--panel-gap) * 2 - 16px);
  justify-content: center;
}

/* playback time indicators */
.playback-bar__progress-time-elapsed {
  pointer-events: none;
}
.playback-bar__progress-time-elapsed::after {
  content: " /";
}
.playback-bar__progress-time-elapsed,
.main-playbackBarRemainingTime-container {
  z-index: 9;
  padding-top: 2px;
}

/* playback seek bar */
.playback-progressbar-container {
  position: absolute;
  width: 100%;
}
.progress-bar {
  --progress-bar-height: 16px;
  --progress-bar-radius: var(--border-radius);
}
.progress-bar__slider {
  box-shadow: none;
  height: 100%;
  border-radius: 0;
  background-color: var(--spice-text);
}

/* cover art */
.main-nowPlayingWidget-coverArt .cover-art {
  height: 32px !important;
  width: 32px !important;
}

/* left nowplaying text */
.main-nowPlayingBar-left {
  padding-inline-start: 0;
}
.main-nowPlayingWidget-trackInfo {
  margin: 0;
}

/* volume bar */
.volume-bar__slider-container .x-progressBar-fillColor,
.volume-bar__slider-container
  .playback-progressbar-isInteractive
  .progress-bar--isDragging
  .x-progressBar-fillColor,
.volume-bar__slider-container
  .playback-progressbar-isInteractive
  .progress-bar:focus
  .x-progressBar-fillColor,
.volume-bar__slider-container
  .playback-progressbar-isInteractive
  .progress-bar:hover
  .x-progressBar-fillColor,
.volume-bar__slider-container
  .playback-progressbar-isInteractive:focus-within
  .x-progressBar-fillColor {
  height: 9px;
  background-color: transparent;
  border-bottom: 2px dashed var(--fg-color);
}
.volume-bar__slider-container .x-progressBar-progressBarBg {
  background-color: transparent;
}

/* player controls */
.player-controls__buttons {
  margin-bottom: 0;
}
.player-controls__buttons,
.main-nowPlayingBar-extraControls {
  opacity: 0.25;
  transition: opacity var(--border-transition);
}
.player-controls__buttons:hover,
.main-nowPlayingBar-extraControls:hover {
  opacity: 1;
}
.main-shuffleButton-button::before,
button[data-testid="control-button-shuffle"]::after,
.ecHWOS
  button:has(path[d="M13.151.922a.75.75 0 1 0-1.06 1.06L13.109 3H11.16a3.75 3.75 0 0 0-2.873 1.34l-6.173 7.356A2.25 2.25 0 0 1 .39 12.5H0V14h.391a3.75 3.75 0 0 0 2.873-1.34l6.173-7.356a2.25 2.25 0 0 1 1.724-.804h1.947l-1.017 1.018a.75.75 0 0 0 1.06 1.06L15.98 3.75 13.15.922zM.391 3.5H0V2h.391c1.109 0 2.16.49 2.873 1.34L4.89 5.277l-.979 1.167-1.796-2.14A2.25 2.25 0 0 0 .39 3.5z"])::before {
  content: "\21C4";
}
.ecHWOS
  button:has(path[d="M12.09.922a.75.75 0 0 1 1.061 0L15.98 3.75l-2.83 2.828a.75.75 0 1 1-1.06-1.06L13.109 4.5H11.16a2.25 2.25 0 0 0-1.724.804L3.264 12.66A3.75 3.75 0 0 1 .391 14H0v-1.5h.391a2.25 2.25 0 0 0 1.724-.804L8.288 4.34A3.75 3.75 0 0 1 11.16 3h1.947L12.09 1.982a.75.75 0 0 1 0-1.06zM.88 3.319C2.255 2.874 2.976 1.787 3.297.874c.036-.102.37-.102.406 0 .321.913 1.042 2 2.417 2.445.103.033.103.329 0 .362-1.375.445-2.096 1.532-2.417 2.445-.036.102-.37.102-.406 0-.321-.913-1.042-2-2.417-2.445-.103-.033-.103-.329 0-.362z"])::before {
  content: "\21C4\2726";
  text-wrap: nowrap;
}
button[data-testid="control-button-seek-back-15"]::before,
button:has(path[d="M2.464 4.5h1.473a.75.75 0 0 1 0 1.5H0V2.063a.75.75 0 0 1 1.5 0v1.27a8.25 8.25 0 1 1 10.539 12.554.75.75 0 0 1-.828-1.25A6.75 6.75 0 1 0 2.464 4.5Z"])::before {
  content: "\21A9";
}
.main-skipBackButton-button::before,
button[data-testid="control-button-skip-back"]::after {
  content: "\25C1";
}
.main-playPauseButton-button[aria-label="Play"]::before,
.main-playPauseButton-button:has(path[d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"])::before,
button[data-testid="control-button-playpause"]:has(path[d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"])::after,
button[data-testid="control-button-playpause"]:has(path[d="m7.05 3.606 13.49 7.788a.7.7 0 0 1 0 1.212L7.05 20.394A.7.7 0 0 1 6 19.788V4.212a.7.7 0 0 1 1.05-.606z"])::after {
  content: "\25B6";
}
.main-playPauseButton-button[aria-label="Pause"]::before,
.main-playPauseButton-button:has(path[d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"])::before,
button[data-testid="control-button-playpause"]:has(path[d="M2.7 1a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7H2.7zm8 0a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-2.6z"])::after,
button[data-testid="control-button-playpause"]:has(path[d="M5.7 3a.7.7 0 0 0-.7.7v16.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V3.7a.7.7 0 0 0-.7-.7H5.7zm10 0a.7.7 0 0 0-.7.7v16.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V3.7a.7.7 0 0 0-.7-.7h-2.6z"])::after {
  content: "\275A\275A";
  text-wrap: nowrap;
}
button[data-testid="control-button-playpause"] {
  padding: 8px;
}
button[data-testid="control-button-playpause"]:hover {
  color: var(--spice-text);
}
button[data-testid="control-button-playpause"] .ButtonInner-small-iconOnly {
  display: none;
}
.main-skipForwardButton-button::before,
button[data-testid="control-button-skip-forward"]::after {
  content: "\25B7";
}
.main-repeatButton-button::before,
button[data-testid="control-button-repeat"]::after {
  content: "\21BB";
}
.main-repeatButton-button[aria-checked="mixed"]::before,
button[data-testid="control-button-repeat"][aria-checked="mixed"]::after {
  content: "\21BB\2474";
  text-wrap: nowrap;
}
.main-shuffleButton-button > svg,
.player-controls__left .ecHWOS svg,
.main-skipBackButton-button > svg,
.main-playPauseButton-button > svg,
.main-skipForwardButton-button > svg,
.main-repeatButton-button > svg,
:is(.player-controls__buttons, .npv-nowPlayingBar-controls) span {
  display: none;
}
button[data-testid="control-button-seek-forward-15"]::before,
button:has(path[d="M13.536 4.488h-1.473a.75.75 0 1 0 0 1.5H16V2.051a.75.75 0 0 0-1.5 0v1.27A8.25 8.25 0 1 0 3.962 15.876a.75.75 0 0 0 .826-1.252 6.75 6.75 0 1 1 8.747-10.136Z"])::before {
  content: "\21AA";
}

/* connect bar */
.main-connectBar-connectBar {
  position: absolute;
  background-color: transparent !important;
  mix-blend-mode: difference;
  pointer-events: none;
  right: var(--panel-gap);
  bottom: var(--panel-gap);
  opacity: 0.25;
  padding: 0 10px 10px;
}
.main-connectBar-connectBar span {
  color: var(--spice-accent-active);
}
.main-connectBar-connectBar svg {
  fill: var(--spice-accent-active);
}
```

<div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;">
  <div style="flex: 1;">
    <img src="https://assets.vluv.space/spotify_tui.webp" alt="Spotify TUI"/>
  </div>
  <div style="flex: 1;">
    <img src="https://assets.vluv.space/spotify_tui_main.webp" alt="Spotify TUI Main"/>
  </div>
</div>

## Ref

[Getting Started | Spicetify](https://spicetify.app/docs/getting-started)
[catppuccin/spicetify: 🎧 Soothing pastel theme for Spotify](https://github.com/catppuccin/spicetify)
[spicetify-themes/text/README.md at master · spicetify/spicetify-themes](https://github.com/spicetify/spicetify-themes/blob/master/text/README.md)