Vantagraph

A modern, modular Spicetify theme for Spotify. 11 hand-tuned color schemes, an in-app settings panel, custom icon set, picture-in-picture lyric karaoke, taskbar player, scroll-wheel volume, and a per-track loop tool - all in one drop-in theme.

Install · Themes · Extensions · Settings · Credits · · Türkçe · Español

---

Dark themes at a glance

Light themes at a glance

---

✨ Highlights

• 11 carefully balanced palettes - 5 dark + 6 light, each tuned for long listening sessions.
• In-app settings panel - 5-tab modal that lives inside Spotify (Theme, Font, Layout, Background, Snippets).
• Custom Vantagraph icon set - 66 hand-drawn SVGs that replace Spotify's Encore icons across topbar, sidebar, player, and context menus.
• Vantagraph Lyric Miniplayer - picture-in-picture window with word-synced karaoke, translations, vinyl, animation presets.
• Vantagraph Taskbar Player - borderless, always-on-top floating bar via documentPictureInPicture. Lets you control playback while another app is in fullscreen.
• Volume+ - scroll wheel volume on the bar, middle-click mute, percentage tooltip, quick presets, mute-state visual.
• LoopyLoop - right-click the progress bar to set start/end points; loops persist per track in localStorage.
• 30+ snippets - hide friends activity, ads banner, "Made for You", "Top Mixes", podcasts filter, etc. Plus rounded images, modern scrollbar, thin library rows, auto-hide sidebar, and a stack of developer tools (layout grid, element highlighter, spacing visualizer, CSS variable monitor, DOM mutation logger).
• Custom backgrounds - any image URL, or use the current album cover, with live blur / brightness / contrast / saturation sliders.
• Custom font & accent - any Google Font (or local), any HEX accent color.
• One-click reset - wipes every localStorage key, injected style, body class, and inline variable.

---

🎨 The eleven themes

Dark

Plus the Spotify Default scheme, included so you can A/B the theme against the stock look.

Light

Two more light themes ship in color.ini and appear in the picker: Rose Vale and Japanese Indigo.

---

📦 Installation

Prerequisites

• Spotify Desktop (tested on 1.2.86+)
• Spicetify CLI (tested on 2.43+)

1. Copy files to the Spicetify folders

Spicetify keeps themes and extensions in two separate folders under your AppData. On Windows the exact paths are:

What	Where it goes
The Vantagraph folder (with color.ini, user.css, theme.js, icons/, screenshots/)	C:\Users\<YOU>\AppData\Roaming\spicetify\Themes\Vantagraph\
Every .js file inside Vantagraph/Extensions/	C:\Users\<YOU>\AppData\Roaming\spicetify\Extensions\

You can open either folder fast with spicetify config-dir.

The final layout should look like this:

%AppData%\spicetify\
├─ Themes\
│  └─ Vantagraph\
│     ├─ color.ini
│     ├─ user.css
│     ├─ theme.js
│     ├─ icons\
│     └─ screenshots\
└─ Extensions\
   ├─ vantagraph-settings.js          ← required
   ├─ vantagraph-icons.js             ← preferred
   ├─ vantagraph-lyric-miniplayer.js  ← optional (recommended)
   ├─ vantagraph-loopyloop.js         ← optional (recommended)
   ├─ vantagraph-taskbarplayer.js     ← optional (recommended)
   ├─ vantagraph-volume-plus.js       ← optional (recommended)
   └─ vantagraph-debug.js             ← developers only

2. Pick what to enable

The extensions fall into four tiers. Mix and match freely - every extension is opt-in except vantagraph-settings.js.

Tier	Extension	Why
Required	vantagraph-settings.js	Without this, the in-app Settings panel (gear icon) never appears. The theme still works without it but you lose all live configuration.
Preferred	vantagraph-icons.js	Replaces 66 Encore SVGs with the Vantagraph icon set. Strongly recommended for the full visual identity, but the theme itself still looks great if you skip it.
Optional (recommended)	vantagraph-lyric-miniplayer.jsvantagraph-loopyloop.jsvantagraph-taskbarplayer.jsvantagraph-volume-plus.js	Feature add-ons. Enable as many as you want. None of them is required for the theme.
Developers only	vantagraph-debug.js	A DevTools-console helper that prints the 3-layer color-override chain. Do not enable as a normal user.

3. Activate Vantagraph

A) Full setup (recommended starter): the exact block from terminalcodes.txt - turns on the theme, settings panel, icons, and all four optional extensions:

spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
spicetify config current_theme vantagraph
spicetify config extensions vantagraph-settings.js
spicetify config extensions vantagraph-volume-plus.js
spicetify config extensions vantagraph-lyric-miniplayer.js
spicetify config extensions vantagraph-loopyloop.js
spicetify config extensions vantagraph-icons.js
spicetify apply

vantagraph-taskbarplayer.js is bundled but not in the default block because it opens a separate Picture-in-Picture window and is not what everyone wants. Add it with spicetify config extensions vantagraph-taskbarplayer.js and re-apply.

B) Minimal setup: theme + settings panel only.

spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
spicetify config current_theme vantagraph
spicetify config extensions vantagraph-settings.js
spicetify apply

After applying, Spotify restarts with Vantagraph active. A gear icon appears at the top right of the topbar; click it to open the settings panel.

Going back to vanilla Spotify

spicetify config inject_css 0 replace_colors 0 overwrite_assets 0 inject_theme_js 0
spicetify config current_theme marketplace
spicetify config extensions vantagraph-settings.js-
spicetify config extensions vantagraph-volume-plus.js-
spicetify config extensions vantagraph-lyric-miniplayer.js-
spicetify config extensions vantagraph-loopyloop.js-
spicetify apply

The trailing - on each extension name is Spicetify's "uninstall" syntax.

---

⚙️ Settings Tour

Vantagraph's settings panel opens from the gear icon in the topbar and runs entirely in-app. It's a 5-tab modal: Theme, Font, Layout, Background, Snippets.

At the bottom of the panel: a red ↻ Reset to Defaults button that wipes every vantagraph:* localStorage key, removes injected <style> and <link> tags, clears inline --spice-* / `--vg