Tool to customize Spotify client UI and expand functionalities. Supports only Windows.
Linux and MacOS users, please check out https://github.com/khanhas/spicetify-cli
How to use
1. Download and install Rainmeter (require version >= 4.1)
2. Download and install rmskin package in release page
3. Load Spicetify skin in Rainmeter Manage
4. Choose Backup in skin UI to start backing up original Spotify files
5. Pick color scheme, edit CSS then Apply
Note: Only Spotify normal version is supported. Windows Store version is under a write permission required folder so I can't make it work. Normal Spotify installer can be downloaded here.
- Custom CSS
- Community themes
- How it works
- How to contribute
To sastify any web developer that has experience with CSS, Inject CSS option will allow you to customize your Spotify client even more.
I included in install package my own CSS theme:
Note: If you prefer original Spotify UI, please clear user.css file or uncheck Inject CSS.
To use color variables, check out Custom CSS wiki page.
If you have multiple themes in Themes folder, click at back and next buttons to rotate through all of them. You also can create new theme and duplicate current theme instantly by using right mouse context menu.
I included some extensions in install package you might find useful, activate them in Spicetify then Apply/Re-apply:
Auto Skip Videos
Videos are unable to play in some regions because of Spotify's policy. Instead of jumping to next song in playlist, it just stops playing. And it's kinda annoying to open up the client to manually click next every times it happens. Use this extension to skip them automatically.
Auto skip explicit tracks
Easily setting up the client for your friends or audiences to choose, add song to queue but prevent them to control player. Plays button in album track list/playlist are re-purposed to add track to queue, instead of play track directly. Hide Controls option also allow you to hide all control button in player bar, Play/More/Follow buttons in cards.
You like using Discover, New Releases page to find new music but adding each one of them to queue takes a lot of effort? If so, activate this extensions and apply. At top of every carousel now has a "Queue All" button to help you add all of them to queue. Note: Not available for playlist carousels. Just songs, albums ones.
Detect current context (playlist, album, user collection or show), gather all its items and shuffle them with Fisher–Yates algorithm. After injecting this extension, go to Queue and you can find 2 new buttons at page header: - Shuffle Context: detect current context and shuffle all its item. - Shuffle Queue: shuffle only 80 items or less that are visible in Queue page. It's only useful for mixed context queue. For most of the time, just use Shuffle Context.
Throw songs/artists to trash bin and never hear them again (automatically skip). This extension will append a trash bin button in player bar and one in every artist page header. Button in player bar will immediately skip and add that song to trash list. Button in artist page will add that artist in trash list and skip whenever his/her songs play.
For Rainmeter user only. Works exactly like WebNowPlaying Companion for browser, get song information and control player directly with WebNowplaying plugin.
Check out Extension wiki page for list of useful functions, object.
Inject custom apps to Spotify and access them in left sidebar.
I included my own app to demonstrate how to make and inject an app:
Fetching top 100 Spotify posts in any subreddit. This app has native feels and behavior just like other Spotify apps: you can follow, save, play, open playlist/track/album directly. Moreover, it also can fetch Youtube posts and play them inside Spotify.
Check out App wiki page for some app making tips.
How it works
Spotify UI is HTML/CSS and runs inside Chromium Embedded Framework. All CSS files controlling element attributes and interaction are packed in SPA files (they basically are ZIP).
These CSS files are extracted first then go through a preparation process that finds and replaces almost all colors with specific keywords.
When user applies his/her own colors scheme, all keywords are replaced with actual colors value, both in hex and RRR,GGG,BBB format.
After that, modded CSS and remaining files are transferred back to Spotify directory.
How to contribute
Install Rainmeter if you have not.
Download this repo and unzip to
cd %userprofile%\Documents\Rainmeter\Skins git clone https://github.com/khanhas/Spicetify.git
Everything you need to run is already in repo.
3. (Optional) Install
yarn to run/install some tools and scripts that make development process easier.