Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 151 additions & 43 deletions Dribbblish/README.md
Original file line number Diff line number Diff line change
@@ -1,110 +1,218 @@
# Dribbblish
# Dribbblish — Spicetify Theme

### Base
A modern, highly customizable Spotify theme for Spicetify with multiple color schemes and advanced UI enhancements.

---

## Preview

### Base
![base](base.png)
### White

### White
![white](white.png)
### Dark

### Dark
![dark](dark.png)
### Nord-Light

### Nord Light
![nord-light](nord-light.png)
### Nord-Dark

### Nord Dark
![nord-dark](nord-dark.png)
### Beach-Sunset

### Beach Sunset
![beach-sunset](beach-sunset.png)
### Purple

### Purple
![purple](purple.png)
### Samurai

### Samurai
![samurai](samurai.png)
### Gruvbox

### Gruvbox
![gruvbox](gruvbox.png)
### Gruvbox Material Dark

### Gruvbox Material Dark
![gruvbox-material-dark](gruvbox-material-dark.png)
### Rosé Pine

### Rosé Pine
![rosepine](rosepine.png)
### Lunar

### Lunar
![lunar](lunar.png)
### Catppuccin Latte

### Catppuccin Latte
![catppuccin-latte](catppuccin-latte.png)
### Catppuccin Frappe

### Catppuccin Frappe
![catppuccin-frappe](catppuccin-frappe.png)
### Catppuccin Macchiato

### Catppuccin Macchiato
![catppuccin-macchiato](catppuccin-macchiato.png)
### Catppuccin Mocha

### Catppuccin Mocha
![catppuccin-mocha](catppuccin-mocha.png)

## Features
### Resizable sidebar
---

<img src="https://i.imgur.com/1zomkmd.png" alt="img" align="center" width="500px">
## Features

### Customizable sidebar
Rearrange icons positions, stick icons to header or hide unnecessary to save space.
Turn on "Sidebar config" mode in Profile menu and hover on icon to show control buttons.
After you finish customizing, turn off Config mode in Profile menu to save.
### Resizable Sidebar
<img src="https://i.imgur.com/1zomkmd.png" alt="img" align="center" width="500px">

<img src="https://i.imgur.com/86gqPe8.png" alt="img" align="center" width="500px">
---

### Playlist Folder image
Right click at folder and choose images for your playlist folder. Every image formats supported by Chrome can be used, but do keep image size small and in compressed format.
### Customizable Sidebar
Rearrange icon positions, stick icons to header, or hide unnecessary icons to save space.

<img src="https://i.imgur.com/WGQ7Bev.gif" alt="img" align="center" width="500px">
**How to use:**
1. Open Profile menu.
2. Enable **Sidebar config** mode.
3. Hover over icons to reveal control buttons.
4. Disable **Sidebar config** mode to save.

### Left/Right expanded cover
In profile menu, toggle option "Right expanded cover" to change expaned current track cover image to left or right side, whereever you prefer.
<img src="https://i.imgur.com/86gqPe8.png" alt="img" align="center" width="500px">

---

### Playlist Folder Images
Right-click a playlist folder and assign custom images.
All Chrome-supported image formats work; small and compressed images are recommended.

<img src="https://i.imgur.com/WGQ7Bev.gif" alt="img" align="center" width="500px">

---

### Left / Right Expanded Cover
Toggle **Right expanded cover** in the Profile menu to move the expanded album artwork to the left or right.

---

## Requirements

- Spicetify **>= v2.5.0**
- Spotify **>= v1.1.56**

---

## Auto Install

## Auto-install
Make sure you are using spicetify >= v2.5.0 and Spotify >= v1.1.56.
### Windows

```powershell
Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/install.ps1" | Invoke-Expression
````
Comment on lines 104 to +105
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Inconsistent branch references between install and uninstall URLs.

The Windows auto-install script references master branch while the uninstall script references v2 branch. This may cause version mismatches or broken functionality if the branches diverge.

# Install (line 104) - uses master:
https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/install.ps1

# Uninstall (line 187) - uses v2:
https://raw.githubusercontent.com/spicetify/spicetify-themes/v2/Dribbblish/uninstall.ps1

Consider aligning both to the same branch for consistency.

Also applies to: 187-188

🤖 Prompt for AI Agents
In `@Dribbblish/README.md` around lines 104 - 105, The README uses inconsistent
branch names for the Windows scripts: update the install URL in the Dribbblish
README (the Invoke-WebRequest line that points to
https://raw.githubusercontent.com/spicetify/spicetify-themes/master/Dribbblish/install.ps1)
so it matches the uninstall URL branch (or vice versa) — ensure both the install
and uninstall Invoke-WebRequest links reference the same branch (e.g., both use
v2 or both use master) to avoid mismatches.


---

## Linux — Hassle-Free Script Install

Ready-made install script is available:

```
install-linux.sh
```
Comment on lines +113 to 115
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add language specifier to code blocks.

Per static analysis, these code blocks should have a language specified. Since they contain filenames, consider using text or bash as the language.

Proposed fix
-```
+```text
 install-linux.sh

```diff
-```
+```text
 uninstall-linux.sh
</details>


Also applies to: 196-198

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 markdownlint-cli2 (0.18.1)</summary>

113-113: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

</details>

</details>

<details>
<summary>🤖 Prompt for AI Agents</summary>

In @Dribbblish/README.md around lines 113 - 115, Update the fenced code blocks
in README.md that currently contain bare filenames (e.g., the blocks showing
"install-linux.sh" and "uninstall-linux.sh") to include a language specifier
like "text" or "bash" (for example change totext or ```bash); apply the
same change to the other similar blocks noted (lines ~196-198) so all
filename-only code fences declare a language.


</details>

<!-- fingerprinting:phantom:poseidon:ocelot -->

<!-- This is an auto-generated comment by CodeRabbit -->


### Usage

```bash
chmod +x install-linux.sh
./install-linux.sh
```

---

## Manual Install
Run these commands:

### Linux and MacOS:
In **Bash**:
### Linux & macOS (Bash)

```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
```

### Windows
In **Powershell**:
---

### Windows (PowerShell)

```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
```

From Spotify > v1.1.62, in sidebar, they use an adaptive render mechanic to actively show and hide items on scroll. It helps reducing number of items to render, hence there is significant performance boost if you have a large playlists collection. But the drawbacks is that item height is hard-coded, it messes up user interaction when we explicity change, in CSS, playlist item height bigger than original value. So you need to add these 2 lines in Patch section in config file:
---

## Sidebar Height Patch (Important)

From Spotify **> v1.1.62**, adaptive rendering breaks interaction when playlist item height is modified via CSS.

Add the following to your Spicetify config file:

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

---

## Change Color Schemes
There are 9 color schemes you can choose: `base`, `white`, `dark`, `dracula`, `nord-dark`, `nord-light`, `beach-sunset`, `samurai`, `purple`, `gruvbox`, `gruvbox-material-dark`, `catppuccin-latte`, `catppuccin-frappe`, `catppuccin-macchiato`, and `catppuccin-mocha`. Change scheme with commands:
```

Available schemes:

`base`, `white`, `dark`, `dracula`, `nord-dark`, `nord-light`,
`beach-sunset`, `samurai`, `purple`, `gruvbox`,
`gruvbox-material-dark`,
`catppuccin-latte`, `catppuccin-frappe`, `catppuccin-macchiato`, `catppuccin-mocha`

### Command

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

## Auto-uninstall
---

## Auto Uninstall

### Windows

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

## Manual uninstall
Remove the dribbblish theme with the following commands
---

## Linux — Hassle-Free Script Uninstall

Ready-made uninstall script is available:

```
uninstall-linux.sh
```

### Usage

```bash
chmod +x uninstall-linux.sh
./uninstall-linux.sh
```

---

## Manual Uninstall

```bash
spicetify config current_theme " " color_scheme " "
spicetify apply
```

---

```
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove orphaned code block marker.

There's an unclosed/orphaned code block at the end of the file that serves no purpose.

Proposed fix
 ---
-
-```
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)

218-218: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🤖 Prompt for AI Agents
In `@Dribbblish/README.md` at line 218, Remove the dangling code-block marker from
the README: locate the orphaned triple-backtick (```) at the end of
Dribbblish/README.md and delete it so there is no unclosed code fence left in
the file.

64 changes: 64 additions & 0 deletions Dribbblish/install-linux.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
#!/usr/bin/env bash

set -e

# Check for spicetify
if ! command -v spicetify >/dev/null 2>&1; then
echo "Spicetify not found"
echo "Follow instruction on: https://spicetify.app/docs/getting-started/simple-installation#linux"
exit 1
fi

echo "Downloading themes package..."

ZIP_FILE="/tmp/spicetify-themes.zip"
EXTRACT_PATH="/tmp/spicetify-themes-master"

curl -L \
"https://github.com/spicetify/spicetify-themes/archive/refs/heads/master.zip" \
-o "$ZIP_FILE"

echo "Extracting themes package..."

rm -rf "$EXTRACT_PATH"
unzip -q "$ZIP_FILE" -d /tmp
Comment on lines +14 to +24
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add -f flag to curl and cleanup temp files on exit.

The curl command should use -f (fail on HTTP errors) to avoid silently creating an empty/invalid zip on 404s. Additionally, the temporary files are never cleaned up after use.

Proposed fix
+# Cleanup on exit
+cleanup() {
+    rm -rf "$ZIP_FILE" "$EXTRACT_PATH"
+}
+trap cleanup EXIT
+
 ZIP_FILE="/tmp/spicetify-themes.zip"
 EXTRACT_PATH="/tmp/spicetify-themes-master"

-curl -L \
+curl -fL \
 "https://github.com/spicetify/spicetify-themes/archive/refs/heads/master.zip" \
 -o "$ZIP_FILE"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
ZIP_FILE="/tmp/spicetify-themes.zip"
EXTRACT_PATH="/tmp/spicetify-themes-master"
curl -L \
"https://github.com/spicetify/spicetify-themes/archive/refs/heads/master.zip" \
-o "$ZIP_FILE"
echo "Extracting themes package..."
rm -rf "$EXTRACT_PATH"
unzip -q "$ZIP_FILE" -d /tmp
# Cleanup on exit
cleanup() {
rm -rf "$ZIP_FILE" "$EXTRACT_PATH"
}
trap cleanup EXIT
ZIP_FILE="/tmp/spicetify-themes.zip"
EXTRACT_PATH="/tmp/spicetify-themes-master"
curl -fL \
"https://github.com/spicetify/spicetify-themes/archive/refs/heads/master.zip" \
-o "$ZIP_FILE"
echo "Extracting themes package..."
rm -rf "$EXTRACT_PATH"
unzip -q "$ZIP_FILE" -d /tmp
🤖 Prompt for AI Agents
In `@Dribbblish/install-linux.sh` around lines 14 - 24, The curl invocation that
creates ZIP_FILE should include the -f flag to fail on HTTP errors and avoid
producing an invalid archive; also ensure temporary files are removed on script
exit by adding a trap that deletes ZIP_FILE and EXTRACT_PATH (and any extracted
temp dir) in case of success or failure, and call that cleanup before exit paths
that follow the unzip step; locate the ZIP_FILE and EXTRACT_PATH variables and
the curl/unzip commands in the script to add the -f flag and the trap cleanup
logic tied to those symbols.


# Resolve spicetify config directory
SPICE_PATH="$(spicetify -c | xargs dirname)"

DRIB_PATH="$EXTRACT_PATH/Dribbblish"
DEST_PATH="$SPICE_PATH/Themes/Dribbblish"

# Copy to personal Themes folder
rm -rf "$DEST_PATH"
cp -r "$DRIB_PATH" "$DEST_PATH"

echo "Configuring..."

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

CONFIG_FILE="$SPICE_PATH/config-xpui.ini"

# Add patch if missing
if ! grep -q "xpui.js_find_8008" "$CONFIG_FILE"; then

if ! grep -q "^\[Patch\]" "$CONFIG_FILE"; then
echo "" >> "$CONFIG_FILE"
echo "[Patch]" >> "$CONFIG_FILE"
fi

cat >> "$CONFIG_FILE" <<EOF
xpui.js_find_8008=,(\\w+=)32,
xpui.js_repl_8008=,\\156,
EOF
Comment on lines +51 to +54
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Escape sequences may behave unexpectedly in heredoc.

The \w and \156 in the heredoc might be interpreted by bash depending on context. Consider using a quoted heredoc (<<'EOF') to prevent any shell interpretation of backslashes.

Proposed fix
-    cat >> "$CONFIG_FILE" <<EOF
+    cat >> "$CONFIG_FILE" <<'EOF'
 xpui.js_find_8008=,(\w+=)32,
 xpui.js_repl_8008=,\156,
 EOF
🤖 Prompt for AI Agents
In `@Dribbblish/install-linux.sh` around lines 51 - 54, The heredoc that appends
to CONFIG_FILE uses backslashes (e.g., \w and \156) which may be interpreted by
the shell; change the heredoc to a quoted form to prevent expansion by replacing
<<EOF with <<'EOF' (or alternatively use printf '%s\n' to write the literal
lines) so the literal strings "xpui.js_find_8008=,(\\w+=)32," and
"xpui.js_repl_8008=,\\156," are written exactly as intended.

fi

# Apply configuration
if grep -q "^version" "$CONFIG_FILE"; then
spicetify apply
else
spicetify backup apply
fi

echo "Done."
20 changes: 20 additions & 0 deletions Dribbblish/uninstall-linux.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
#!/usr/bin/env bash

# Clear current theme
spicetify config current_theme ""
Comment on lines +1 to +4
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add set -e and spicetify existence check for consistency.

Unlike the install script, this script lacks set -e and doesn't verify spicetify is installed before attempting to use it. This could lead to confusing errors.

Proposed fix
 #!/usr/bin/env bash

+set -e
+
+# Check for spicetify
+if ! command -v spicetify >/dev/null 2>&1; then
+    echo "Spicetify not found"
+    exit 1
+fi
+
 # Clear current theme
 spicetify config current_theme ""
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
#!/usr/bin/env bash
# Clear current theme
spicetify config current_theme ""
#!/usr/bin/env bash
set -e
# Check for spicetify
if ! command -v spicetify >/dev/null 2>&1; then
echo "Spicetify not found"
exit 1
fi
# Clear current theme
spicetify config current_theme ""
🤖 Prompt for AI Agents
In `@Dribbblish/uninstall-linux.sh` around lines 1 - 4, Add a strict-fail at the
top of uninstall-linux.sh by enabling "set -e" and mirror the install script's
safety check by verifying spicetify is installed before running any commands; if
the "spicetify" binary is missing, print a clear error and exit non-zero.
Specifically, update uninstall-linux.sh to add "set -e" near the shebang and add
a check (e.g., using command existence test for "spicetify") that aborts with an
explanatory message if not found, then proceed to call "spicetify config
current_theme \"\"" only when the check passes.


# Get Spicetify config path
CONFIG_PATH=$(spicetify -c)

# Create a backup for safety
cp "$CONFIG_PATH" "$CONFIG_PATH.bak"

# Remove xpui.js_find_8008 line
sed -i '/xpui.js_find_8008/d' "$CONFIG_PATH"

# Remove xpui.js_repl_8008 line
sed -i '/xpui.js_repl_8008/d' "$CONFIG_PATH"

# Apply changes
spicetify apply