Spotify Tweaks

Guide.md

Windows

Requirements

• 7-Zip

Steps

1. Close Spotify
2. Navigate to %APPDATA%\Spotify\Apps in File Explorer (Win+R then paste %APPDATA%\Spotify\Apps)
3. Right Click on xpui.spa then click Open Archive under 7-Zip
4. Double Click on xpui.css in 7-Zip
5. Paste the css from spotify.mod.css at the end of the file
6. Uncomment Optional Tweaks if you want
7. Save (Ctrl+S)
8. Return to 7-Zip
9. Click Ok on the Dialog that says File 'xpui.css' was modified. Do you want to update the archive?

Relaunch Spotify

Mac OS

Manual

1. Quit Spotify
2. Run the following shell commands

cd /Applications/Spotify.app/Contents/Resources/Apps/
unzip xpui.spa -d xpui
curl "https://gist.githubusercontent.com/fallsimply/1b2f3659251e1e62214655dfce629648/raw/spotify.mod.css" >> xpui/xpui.css

3. Relaunch Spotify

Automatic (Coming Soon)

1. Download [Patch Spotify] automater app
2. Run Patch Spotify

patch.macos.sh

osascript -e 'quit app "spotify"'
cd /Applications/Spotify.app/Contents/Resources/Apps/
unzip xpui.spa -d xpui
curl "https://gist.githubusercontent.com/fallsimply/1b2f3659251e1e62214655dfce629648/raw/spotify.mod.css" >> xpui/xpui.css
osascript -e 'tell application "spotify" to activate'

spotify.mod.css

/* fallsimply Spotify Tweaks - https://git.io/fallsimplySpotTweaksGist */
/* Fix Fullscreen Button Alignment */
button.control-button[aria-label="Full screen"] {
	margin-left: .5rem;
}

button.control-button[aria-label="Full screen"] svg {
	margin: 8px;
}

/* Smooth Gradient */
._59ed5f1313c7c4b211995d2b6463683f-scss,
[data-testid="action-background-container"] {
    background-image: linear-gradient(rgba(0, 0, 0, .5), rgb(18, 18, 18)), var(--background-noise, none);
}

/* Shadow for Smooth Gradient */
._5d10f53f6ab203d3259e148b9f1c2278-scss,
.eae5aabff7beab294ee900c0a1928b4c-scss {
    box-shadow: 0 2px 16px rgba(0, 0, 0, .50);
}

/* 
	OPTIONAL
 */

/* Hide Dividers */
hr._752cd60a82eaf0dd41c84e90b6479cbb-scss {
    background: none
}
/* Bold Icons */
div.Root__top-container > nav.Root__nav-bar ul > li > a :is(div.icon.home-icon, div.icon.search-icon, div.collection-icon) {
    display: none !important;
}
div.Root__top-container > nav.Root__nav-bar ul > li > a :is(div.icon.home-active-icon, div.icon.search-active-icon, div.collection-active-icon) {
    display: unset !important;
}
/* Slim Scrollbars */
:root {
  --scrollbar-vertical-size: 12px;
  --scrollbar-horizontal-size: 16px;
}
.os-theme-spotify > :is(.os-scrollbar-vertical, .os-scrollbar-horizontal) {
  padding: 4px;
}
.os-theme-spotify > :is(.os-scrollbar-vertical, .os-scrollbar-horizontal) > .os-scrollbar-track > .os-scrollbar-handle {
	border-radius: 8px;
}
/* Make Create Playlist and Liked Songs consistant with Your Episodes */
:is(button[data-testid="create-playlist-button"], a[href="/collection/tracks"]) > div > div {
	border-radius: 4px;
}

spotify.user.css

/* ==UserStyle==
@name         Spotify Tweaks
@namespace    fallsimply-tweaks
@version      0.4.0
@description  fallsimply's spotify tweaks
@author       fallsimply
@updateURL    https://gist.githubusercontent.com/fallsimply/1b2f3659251e1e62214655dfce629648/raw/spotify.user.css
@preprocessor stylus
@license      MIT

@var checkbox hide-branding "Hide Spotify Logo and Download App button" 1
@var checkbox smooth-gradient "Smooth Gradient between header and controls in albums, playlists, and podcasts" 1
@var checkbox fix-fullscreen-controls "Fix alignment of Fullscreen button in the playback controls" 1
@var checkbox slim-scrollbar "Slim Scrollbars" 1
@var checkbox round-sidebar-icons "Match Create Playlist and Liked Songs to Your Episodes" 1
@var checkbox hide-menu-hr "Hide seperator between Liked Songs and your playlists" 0
@var checkbox slim-navigation "Slim Navigation" 0
@var checkbox bold-icons "Force Bold Icons (Active Icons)" 0
==/UserStyle== */
desktop = false
@-moz-document domain("open.spotify.com") {
	if hide-branding {
		nav.Root__nav-bar .logo,
		nav.Root__nav-bar a[href="/download"] {
			display: none !important; 
		}
	}
	
	if smooth-gradient {
		._5d10f53f6ab203d3259e148b9f1c2278-scss,
		.eae5aabff7beab294ee900c0a1928b4c-scss {
			box-shadow: 0 2px 16px rgba(0, 0, 0, .50);
		}
		._59ed5f1313c7c4b211995d2b6463683f-scss,
		[data-testid="action-background-container"] {
			background-image: linear-gradient(rgba(0, 0, 0, .5), rgb(18, 18, 18)), var(--background-noise, none);
		}
	}
	
	if fix-fullscreen-controls {
		/* Fix Fullscreen Button Alignment */
		button.control-button[aria-label="Full screen"] {
			margin-left: .5rem;
		}

		button.control-button[aria-label="Full screen"] svg {
			margin: 8px;
		}
	}
	
	if hide-menu-hr {
		hr._752cd60a82eaf0dd41c84e90b6479cbb-scss {
			background: none
		}
	}
	if slim-navigation {
		div.Root__top-container > nav.Root__nav-bar > div > ul {
			if desktop {
				padding-top: 32px;
			}
			display: flex;
			justify-content: space-evenly;
			& li a {
				& > div.icon {
					margin-right: 0;
				}
				& span {
					display: none;
				}
			}
		}
	}
	if bold-icons {
		div.Root__top-container > nav.Root__nav-bar ul > li a {
			& > div.icon {
				&.home-icon, &.search-icon, &.collection-icon {
					display: none !important;
				}
				&.home-active-icon, &.search-active-icon, &.collection-active-icon {
					display: unset !important;
				}
			}
		}
	}
	if slim-scrollbars {
		:root {
			--scrollbar-vertical-size: 12px;
			--scrollbar-horizontal-size: 16px;
		}
		.os-theme-spotify > .os-scrollbar-vertical, .os-theme-spotify > .os-scrollbar-horizontal  {
			padding: 4px;
			& > .os-scrollbar-track > .os-scrollbar-handle {
				border-radius: 8px;
			}
		}
	}
	if round-sidebar-icons {
		button[data-testid="create-playlist-button"], a[href="/collection/tracks"] {
			& > div > div {
				border-radius: 4px
			}
		}
	}
	if slim-navigation {
		div.Root__top-container > nav.Root__nav-bar > div > ul {
			if desktop {
				padding-top: 32px;
			}
			display: flex;
			justify-content: space-evenly;
			& li a {
				& > div.icon {
					margin-right: 0;
				}
				& span {
					display: none;
				}
			}
		}
	}
}