Spicetify Community Themes

https://github.com/spicetify/spicetify-themes
Admin
Spicetify Community Themes is a collection of themes for Spicetify, a command-line tool that allows...
Tokens:26,981
Snippets:211
Trust Score:7.7
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Auto-install on Windows (PowerShell)

Source: https://github.com/spicetify/spicetify-themes/blob/master/Dribbblish/README.md

Downloads and runs the install script for Dribbblish on Windows. Requires spicetify >= v2.5.0 and Spotify >= v1.1.56.

```powershell
Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/install.ps1" | Invoke-Expression
```

--------------------------------

### Manual install on Windows (PowerShell)

Source: https://github.com/spicetify/spicetify-themes/blob/master/Dribbblish/README.md

Commands to manually install Dribbblish on Windows using PowerShell. Sets the theme, color scheme, and applies the configuration.

```powershell
cd "$(spicetify -c | Split-Path)\Themes\Dribbblish"
spicetify config current_theme Dribbblish color_scheme base
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
spicetify apply
```

--------------------------------

### Manual install on Linux and macOS (Bash)

Source: https://github.com/spicetify/spicetify-themes/blob/master/Dribbblish/README.md

Commands to manually install Dribbblish on Linux and macOS using Bash. Sets the theme, color scheme, and applies the configuration.

```bash
cd "$(dirname "$(spicetify -c)")/Themes/Dribbblish"
spicetify config current_theme Dribbblish color_scheme base
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
spicetify apply
```

--------------------------------

### Clone the spicetify-themes repository

Source: https://github.com/spicetify/spicetify-themes/blob/master/README.md

Clones the repository with a shallow depth to save bandwidth. Requires git to be installed.

```bash
git clone --depth=1 https://github.com/spicetify/spicetify-themes.git 
```

--------------------------------

### Default/color.ini [Ocean] scheme

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/color-ini.md

Example color scheme definition from Default/color.ini. Uses INI format with hex colors (no leading #) and whitespace-tolerant keys. Semicolons introduce comments.

```ini
[Ocean]
text               = FFFFFF
subtext            = F1F1F1
main               = 0F111A
sidebar            = 0F111A
player             = 0F111A
card               = 00010A
shadow             = 0F111A
selected-row       = F1F1F1
button             = FF4151
button-active      = F1F1F1
button-disabled    = 434C5E
tab-active         = FF4151
notification       = 00010A
notification-error = FF4151
misc               = 00010A

```

--------------------------------

### Check spicetify presence in install.ps1

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/powershell-installer.md

Checks whether the spicetify executable is on PATH. If not, prints a red error and exits the script without installing.

```powershell
$checkSpice = Get-Command spicetify -ErrorAction Silent
if ($null -eq $checkSpicecon) {
    Write-Host -ForegroundColor Red "Spicetify not found"
    Write-Host "Follow instruction on:", "https://spicetify.app/docs/getting-started/simple-installation#windows"
    return
}
```

--------------------------------

### Using --spice-rgb-* in rgba() (Dreary/user.css:363)

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/user-css.md

Example of using the companion triplet variable --spice-rgb-selected-row inside an rgba() alpha composition, as observed in Dreary/user.css. The !important flag is used to override Spotify's inline styles.

```css
background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;   /* Dreary/user.css:363 */
```

--------------------------------

### Deploy spicetify-themes: clone, copy, configure, apply

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/configuration.md

Deploy flow from the root README: clone the repository, copy themes to the Spicetify Themes folder (Linux/macOS path shown; Windows command commented), set the active theme and optional color scheme, then apply. Requires the spicetify CLI and a configured config directory.

```bash
git clone --depth=1 https://github.com/spicetify/spicetify-themes.git
cd spicetify-themes
cp -r * ~/.config/spicetify/Themes            # Linux / macOS
# Windows: cp * "$(spicetify -c | Split-Path)\Themes\" -Recurse
spicetify config current_theme THEME_NAME
spicetify config color_scheme SCHEME_NAME      # optional, for multi-scheme themes
spicetify apply
```

--------------------------------

### Apply a Spicetify theme via CLI

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/manifest.md

Copies the repository into the Spicetify Themes folder, then selects a theme by manifest name and applies it. The theme name and color scheme must match the manifest.json 'name' and a section from the theme's color.ini.

```bash
# copy repository into the Spicetify Themes folder, then select a theme by manifest name
spicetify config current_theme Dribbblish
spicetify config color_scheme base
spicetify apply
```

--------------------------------

### Apply Dribbblish with backup handling

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/powershell-installer.md

Applies the spicetify configuration. If the config already has a version key, runs spicetify apply; otherwise runs spicetify backup apply to create a backup first.

```powershell
$backupVer = $configFile -match "^version"
$version = ConvertFrom-StringData $backupVer[0]
if ($version.version.Length -gt 0) {
    spicetify apply
} else {
    spicetify backup apply
}
```

--------------------------------

### Turntable: Enable fullAppDisplay extension

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/theme-directories.md

Commands to enable the fullAppDisplay.js extension and apply the theme. Required for Turntable theme's Full App Display enhancements.

```shell
spicetify config extensions fullAppDisplay.js
spicetify apply
```

--------------------------------

### Select a color scheme with spicetify CLI

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/color-ini.md

Use these commands to set the current theme and color scheme, then apply. The color_scheme must match a [section] in the theme's color.ini file.

```bash
spicetify config current_theme Dribbblish
spicetify config color_scheme kanagawa   # must match a [section] in Dribbblish/color.ini
spicetify apply
```

--------------------------------

### Copy themes to Spicetify Themes folder (Linux/macOS)

Source: https://github.com/spicetify/spicetify-themes/blob/master/README.md

Copies all theme files into the Spicetify Themes directory. The same commands work for both Linux and macOS.

```bash
cd spicetify-themes
cp -r * ~/.config/spicetify/Themes
```

--------------------------------

### Download and extract themes package

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/powershell-installer.md

Downloads the master branch of the spicetify-themes repository into %TEMP%, removes any stale extraction folder, and expands the archive.

```powershell
$zipFile = "$env:TEMP\spicetify-themes.zip"
Invoke-WebRequest "https://github.com/spicetify/spicetify-themes/archive/refs/heads/master.zip" -OutFile $zipFile

$extractPath = "$env:TEMP\spicetify-themes-master"
if (Test-Path $extractPathcon) { Remove-Item $extractPath -Recurse -Force }
Expand-Archive $zipFile -DestinationPath $env:TEMP
```

--------------------------------

### Apply Onepunch theme with Spicetify CLI

Source: https://github.com/spicetify/spicetify-themes/blob/master/Onepunch/README.md

Commands to apply the Onepunch theme for dark or light color scheme. Run the config command followed by apply for the desired scheme.

```shell
# for dark theme
spicetify config current_theme Onepunch color_scheme dark
spicetify apply

#for light theme
spicetify config current_theme Onepunch color_scheme light
spicetify apply
```

--------------------------------

### Apply a theme with spicetify config current_theme

Source: https://github.com/spicetify/spicetify-themes/blob/master/README.md

Sets the active theme by name. Replace THEME_NAME with the actual theme name.

```bash
spicetify config current_theme THEME_NAME
```

--------------------------------

### Spicetify.ContextMenu.Item

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Constructor for creating a context menu item. Call `register()` to add it to the context menu.

```APIDOC
## Spicetify.ContextMenu.Item

### Description
Constructor for creating a context menu item. Call `register()` to add it to the context menu.

### Constructor
`new Spicetify.ContextMenu.Item(label: string, onClick: (uris: string[]) => void, shouldShow: (uris: string[]) => boolean, icon?: string)`

### Methods
- `register()` () → void - Appends the item to the context menu.
```

--------------------------------

### PlayerOrigin

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Origin object exposing internal player state and event emitter.

```APIDOC
## PlayerOrigin (Spicetify.Player.origin)

### Description
Origin object exposing internal player state and event emitter.

### Members
- `_state` (object) - Contains `item` (with `isLocal` boolean, `type` string like `"ad"` or `"track"`), `isPaused` boolean.
- `_events` (EventEmitter) - Supports `.addListener("update" | "queue_update", cb)`.
- `skipToPrevious()` () → void - Skip to previous track.
- `skipToNext()` () → void - Skip to next track.
```

--------------------------------

### Change color scheme with spicetify config

Source: https://github.com/spicetify/spicetify-themes/blob/master/Sleek/README.md

Use these commands to change the Sleek theme's color scheme. Replace <scheme name> with one of the available schemes (e.g., BladeRunner, Cherry). After running the config command, apply the changes with spicetify apply.

```bash
spicetify config color_scheme <scheme name>
spicetify apply
```

--------------------------------

### Spicetify.URI

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

URI utility for parsing and inspecting Spotify URIs.

```APIDOC
## Spicetify.URI

### Description
URI utility for parsing and inspecting Spotify URIs.

### Methods
- `from(string)` → `{ id: string }` - Parse a URI string.
- `isFolder(uri)` → boolean - Check if URI is a folder.
```

--------------------------------

### Auto-uninstall on Windows (PowerShell)

Source: https://github.com/spicetify/spicetify-themes/blob/master/Dribbblish/README.md

Downloads and runs the uninstall script for Dribbblish on Windows.

```powershell
Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/v2/Dribbblish/uninstall.ps1" | Invoke-Expression
```

--------------------------------

### manifest.json theme entry structure

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/manifest.md

Shows the JSON structure for a single theme entry in the manifest.json file. Each entry includes fields like name, description, preview, readme, usercss, schemes, include, authors, and tags.

```json
[
	{
		"name": "...",
		"description": "...",
		"preview": "...",
		"readme": "...",
		"usercss": "...",
		"schemes": "...",
		"include": [ "https://..." ],
		"authors": [ { "name": "...", "url": "..." } ],
		"tags": [ "latest" ]
	}
]
```

--------------------------------

### Spicetify.CosmosAsync

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Async HTTP client for making requests to Spicetify services.

```APIDOC
## Spicetify.CosmosAsync

### Description
Async HTTP client for making requests to Spicetify services.

### Methods
- `get(url, options)` → Promise<`{ metadata: { picture: string|null} }`> - Perform GET request. Example: `get("sp://core-playlist/v1/playlist/${uri}/metadata", { policy: { picture: true } })`.
```

--------------------------------

### Spicetify.Player

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Global player object provided by the Spicetify client. Theme scripts read playback state, progress, and register event listeners.

```APIDOC
## Spicetify.Player

### Description
Global player object provided by the Spicetify client. Theme scripts read playback state, progress, and register event listeners.

### Members
- `origin` (PlayerOrigin) - Player origin object.
- `getProgress()` → `{ data: number }`-like - Current progress value.
- `getProgressPercent()` → number - Progress percentage (0-100).
- `getDuration()` → number - Track duration in milliseconds.
- `formatTime(ms)` → string - Format milliseconds to time string.
- `getHeart()` → boolean - Whether current track is favorited.
- `toggleHeart` () → void - Toggle favorite state.
- `addEventListener(event, cb)` - Register event listener. Events: `"onprogress"`, `"onplaypause"`, `"songchange"`.
```

--------------------------------

### Copy themes to Spicetify Themes folder (Windows PowerShell)

Source: https://github.com/spicetify/spicetify-themes/blob/master/README.md

Copies all theme files into the Spicetify Themes directory using PowerShell. Uses the spicetify -c command to locate the Themes folder.

```powershell
cd spicetify-themes
cp * "$(spicetify -c | Split-Path)\Themes\" -Recurse
```

--------------------------------

### Spicetify.Platform

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Platform information object.

```APIDOC
## Spicetify.Platform

### Description
Platform information object.

### Members
- `PlatformData.event_sender_context_information.client_version_int` (number) - Client version integer.
- `ConnectAPI.state.connectionStatus` (any) - Connection status (commented-out reference).
```

--------------------------------

### User-editable CSS variables for Matte theme

Source: https://github.com/spicetify/spicetify-themes/blob/master/Matte/README.md

Defines CSS custom properties for top bar, sidebar, player, and scrollbar styling. Place at the top of user.css or paste into Marketplace > Snippets > + Add CSS for quick configuration.

```css
/*  ================================
    USER-EDITABLE VARIABLES
    ================================ */

:root {
    /* top bar vars */
    --top-bar-padding-top: 45px;
    --top-bar-padding-right: 20px;
    --top-bar-padding-bottom: 5px;
    --top-bar-padding-left: 20px;
    --tab-border-radius: 6px;
    --top-bar-border-width: 2px;

    /* sidebar vars */
    --sidebar-button-border-radius: 4px;
    --sidebar-border-width: 2px;

    /* player vars */
    --player-height: 90px;
    --player-padding: 0 20px;
    --player-border-width: 2px;

    /* scrollbar vars */
    --scrollbar-border-radius: 4px;
    --scrollbar-width: 6px;
    --scrollbar-width-hover: 6px;
}
```

--------------------------------

### Switch color scheme with spicetify config color_scheme

Source: https://github.com/spicetify/spicetify-themes/blob/master/README.md

Changes the color scheme for themes that support multiple schemes. Replace SCHEME_NAME with the desired scheme name.

```bash
spicetify config color_scheme SCHEME_NAME
```

--------------------------------

### Copy Dribbblish theme to config directory

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/powershell-installer.md

Copies the Dribbblish theme folder from the extracted package into the personal Themes directory, replacing any existing copy.

```powershell
$spicePath = spicetify -c | Split-Path
$dribPath = "$extractPath\Dribbblish"
$destPath = "$spicePath\Themes\Dribbblish"
if (Test-Path $destPathcon) { Remove-Item $destPath -Recurse -Force }
Copy-Item $dribPath $destPath -Recurse
```

--------------------------------

### Manual uninstall

Source: https://github.com/spicetify/spicetify-themes/blob/master/Dribbblish/README.md

Commands to manually remove the Dribbblish theme by resetting the current_theme and color_scheme configuration.

```text
spicetify config current_theme " " color_scheme " "
spicetify apply
```

--------------------------------

### Patch for Spotify > v1.1.62 (config file)

Source: https://github.com/spicetify/spicetify-themes/blob/master/Dribbblish/README.md

Add these lines to the Patch section of the config file to fix sidebar item height issues caused by adaptive rendering. Required for Spotify versions greater than v1.1.62.

```ini
[Patch]
xpui.js_find_8008 = ,(\w+=)32,
xpui.js_repl_8008 = ,${1}56,
```

--------------------------------

### Spicetify.SVGIcons

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Map of SVG path strings keyed by icon name.

```APIDOC
## Spicetify.SVGIcons

### Description
Map of SVG path strings keyed by icon name.

### Members
- `"artist"` (string) - SVG path for artist icon.
- `"album"` (string) - SVG path for album icon.
- `"heart"` (string) - SVG path for heart icon.
- `"heart-active"` (string) - SVG path for active heart icon.
```

--------------------------------

### Add [Patch] section to config-xpui.ini for Dribbblish

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/configuration.md

Required for Dribbblish on Spotify > v1.1.62. Raises the hard-coded sidebar item height from 32 to 56 pixels. install.ps1 appends it idempotently when xpui.js_find_8008 is absent; uninstall.ps1 removes both keys with regex-escaped standalone-line deletion.

```ini
[Patch]
xpui.js_find_8008=,(\w+=)32,
xpui.js_repl_8008=,${1}56,
```

--------------------------------

### Append [Patch] section for Dribbblish

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/powershell-installer.md

Adds the [Patch] section with xpui.js_find_8008 and xpui.js_repl_8008 lines only if not already present; fixes hard-coded item height for larger playlist rows. Required for Spotify > v1.1.62.

```powershell
$configFile = Get-Content "$spicePath\config-xpui.ini"
if (-not ($configFile -match "xpui.js_find_8008")) {
    $rep = @"
[Patch]
xpui.js_find_8008=,(\w+=)32,
xpui.js_repl_8008=,`${1}56,
"@
    if (-not ($configFile -match "\[Patch\]"))) { $configFile += "`n[Patch]`n" }
    $configFile = $configFile -replace "\[Patch\]",$rep
    Set-Content "$spicePath\config-xpui.ini" $configFile
}
```

--------------------------------

### Turntable :root custom properties

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/user-css.md

Defines the root CSS variables for the Turntable theme, including the Spotify main color, round value, backdrop blur, and a conic gradient for shine. Color values are hard-coded as the theme's color.ini is deliberately empty.

```css
:root {
  --spotify-main-color: #1db954;
  --round-value: 50%;
  --main-blur-backdrop: blur(20px) saturate(180%);
  --shine: conic-gradient(from 15deg, transparent, #222 45deg, transparent 90deg 180deg, #222 225deg, transparent 270deg 360deg);
}
```

--------------------------------

### Spicetify.Queue

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Queue state object exposing previous, current, and next tracks.

```APIDOC
## Spicetify.Queue

### Description
Queue state object exposing previous, current, and next tracks.

### Members
- `prevTracks` (QueueItem[]) - Previous tracks.
- `track` (QueueItem) - Current track.
- `nextTracks` (QueueItem[]) - Next tracks.

`QueueItem` observed members: `contextTrack.metadata.title` (string), `provider` (string; compared to `"ad"`), `contextTrack.metadata.hidden` (boolean).
```

--------------------------------

### Set Dribbblish spicetify configuration

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/powershell-installer.md

Configures spicetify by enabling CSS injection, color replacement, asset overwriting, theme JS, and sets the current theme to Dribbblish.

```powershell
spicetify
spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1 current_theme Dribbblish
```

--------------------------------

### CSS variable mapping for color keys

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Maps every color key `k` to a custom property consumed by user.css. The `--spice-rgb-*` variant is used in BurntSienna, Dreary, Dribbblish, Matte, Onepunch, and Sleek files.

```css
--spice-<k>     /* e.g. --spice-text, --spice-main, --spice-highlight */
--spice-rgb-<k> /* R,G,B triplet (comma-separated integers, suitable for rgba(var(--spice-rgb-<k>), a)) */
```

--------------------------------

### Spicetify theme user settings CSS variables

Source: https://github.com/spicetify/spicetify-themes/blob/master/text/README.md

CSS variables for the theme's user settings. Edit these in user.css or via Marketplace > Snippets > + Add CSS, adding !important to each property if using the snippet method. Controls font, image display, borders, and global nav margin.

```css
/* user settings */
:root {
    --font-family: "JetBrains Mono", monospace;
    /*
    --font-family: 'Anonymous Pro', monospace;
    --font-family: 'Azeret Mono', monospace;
    --font-family: 'B612 Mono', monospace;
    --font-family: 'Courier Prime', monospace;
    --font-family: 'Cousine', monospace;
    --font-family: 'Cutive Mono', monospace;
    --font-family: 'DM Mono', monospace;
    --font-family: 'Fira Code', monospace;
    --font-family: 'Fira Mono', monospace;
    --font-family: 'IBM Plex Mono', monospace;
    --font-family: 'JetBrains Mono', monospace;
    --font-family: 'M PLUS 1 Code', monospace;
    --font-family: 'Major Mono Display', monospace;
    --font-family: 'Monofett', monospace;
    --font-family: 'Nova Mono', monospace;
    --font-family: 'Overpass Mono', monospace;
    --font-family: 'Oxygen Mono', monospace;
    --font-family: 'PT Mono', monospace;
    --font-family: 'Roboto Mono', monospace;
    --font-family: 'Share Tech Mono', monospace;
    --font-family: 'Sometype Mono', monospace;
    --font-family: 'Sono', monospace;
    --font-family: 'Source Code Pro', monospace;
    --font-family: 'Space Mono', monospace;
    --font-family: 'Syne Mono', monospace;
    --font-family: 'Ubuntu Mono', monospace;
    --font-family: 'VT323', monospace;
    --font-family: 'Xanh Mono', monospace;
    */
    --font-size: 14px;
    --font-weight: 400; /* 200 : 900 */
    --line-height: 1.2;

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

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

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

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

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

--------------------------------

### ColorScheme INI section

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Defines a color scheme in a color.ini file. The section name is the scheme name, and each key-value pair maps a color key to a 6-digit hex RGB value without a leading '#' (e.g., FFFFFF). Select the scheme with `spicetify config color_scheme <scheme-name>`.

```ini
[<scheme-name>]
<key> = <hex-rgb>
```

--------------------------------

### Transparent window controls background CSS for Windows

Source: https://github.com/spicetify/spicetify-themes/blob/master/text/README.md

CSS snippet to make window controls' background match the topbar. Place in user.css or via Marketplace's + Add CSS. Adjust width and height based on page zoom and global status bar style.

```css
/* transparent window controls background */
.spotify__container--is-desktop:not(.fullscreen) body::after {
    content: "";
    position: absolute;
    right: 0;
    z-index: 999;

    backdrop-filter: brightness(2.12);
    /* page zoom [ctrl][+] or [ctrl][-]
       edit width and height accordingly */
    width: 135px;
    /* depending on what global status bar
       style is enabled height need to be
       changed accordingly. */
    height: 64px;
}
```

--------------------------------

### Transparent window controls background for Windows

Source: https://github.com/spicetify/spicetify-themes/blob/master/Matte/README.md

CSS snippet to make the window controls' background match the topbar. Add to user.css or via Marketplace's custom CSS feature. Requires enabling CEF/Spotify Tweaks in Windhawk for best results. Adjust width and height based on page zoom.

```css
/* transparent window controls background */
.spotify__container--is-desktop:not(.fullscreen) body::after {
    content: "";
    position: absolute;
    right: 0;
    z-index: 999;
    backdrop-filter: brightness(2.12);
    /* page zoom [ctrl][+] or [ctrl][-]
       edit width and height accordingly
    */
    width: 135px;
    height: 48px;
}
```

--------------------------------

### Spicetify.showNotification

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Show a notification message.

```APIDOC
## Spicetify.showNotification

### Description
Show a notification message.

### Signature
`showNotification(message: string): void`
```

--------------------------------

### ExtendedColorKey union

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Union of theme-specific extra color keys across all color.ini files. See color-ini.md for which theme defines which key.

```text
"highlight" | "highlight-elevated" | "main-elevated" | "main-secondary" | "play-button" |
"playback-bar" | "nav-active" | "nav-active-text" | "button-secondary" | "topbar" |
"topbar-text" | "topbar-subtext" | "topbar-border" | "sidebar-border" | "tab-hover" |
"tab-active-text" | "scrollbar" | "scrollbar-hover" | "context-menu" |
"context-menu-hover" | "context-menu-text" | "player-text" | "player-subtext" |
"player-selected-row" | "player-border" | "link-active" | "link-active-text" |
"link-hover-text" | "star" | "star-glow" | "shooting-star" | "shooting-star-glow" |
"sidebar-alt" | "accent" | "accent-active" | "accent-inactive" | "header" | "banner" |
"border-active" | "border-inactive" | "gradientTop" | "gradientBottom" | "card-background" |
"card-hover" | "sub-button" | "subbutton-text" | "button-text" | "background" |
"extratext" | "sec-player" | "sec-card" | "playback-bar"
```

--------------------------------

### Spicetify.PopupModal

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Popup modal object for showing and interacting with modal dialogs.

```APIDOC
## Spicetify.PopupModal

### Description
Popup modal object for showing and interacting with modal dialogs.

### Members
- `hide()` () → void - Hide the modal.
- `querySelector(sel)` → Element - Query a selector within the modal.
- `addEventListener("click", cb)` - Register click listener.
- `configContainer` - Element obtained via `querySelector("main > div")` for injecting settings.
```

--------------------------------

### Uninstall Dribbblish theme

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/powershell-installer.md

Uninstalls Dribbblish: resets the theme to empty, strips the patch lines added by install.ps1, writes the config back, and reapplies spicetify to restore the default look.

```powershell
spicetify config current_theme " "
$configPath = spicetify -c
$configFile = Get-Content $configPath
$find = $configFile -match "xpui.js_find_8008"
if ($find) { $configFile = $configFile -replace [regex]::escape($find),"" }
$repl = $configFile -match "xpui.js_repl_8008"
if ($repl) { $configFile = $configFile -replace [regex]::escape($repl),"" }
Set-Content $configPath $configFile
spicetify apply
```

--------------------------------

### random(min, max) helper function

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/theme-js.md

Returns a random number between min (inclusive) and max (exclusive). Used by the star field generation to randomize star sizes and animation delays.

```javascript
function random(min, max) {
  // min inclusive max exclusive
  return Math.random() * (max - min) + min;
}
```

--------------------------------

### Dribbblish :root custom properties

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/api-reference/user-css.md

Defines the root CSS variables for the Dribbblish theme, including corner radius, bar cover art size, scrollbar sizes, bar height, and main gap. Also defines font-family variables on body and bundles woff2 font assets.

```css
:root {
    --corner-radius: 10px;
    --bar-cover-art-size: 40px;
    --scrollbar-vertical-size: 10px;
    --scrollbar-horizontal-size: 10px;
    --bar-height: 90px;
    --main-gap: 10px;
}
```

--------------------------------

### ColorKey base set union

Source: https://github.com/spicetify/spicetify-themes/blob/master/_autodocs/types.md

Union of the 16 base color keys observed in the repository's scheme files. Values are 6-digit hex RGB strings without '#' (e.g., FFFFFF). The `sidebar-text` key is optional and missing in `Default/Ocean` and `Blossom`.

```text
"text" | "subtext" | "sidebar-text" | "main" | "sidebar" | "player" | "card" |
"shadow" | "selected-row" | "button" | "button-active" | "button-disabled" |
"tab-active" | "notification" | "notification-error" | "misc"
```
Tokens:
Raw