Skip to content
Spice up your Spotify client
Branch: master
Clone or download
khanhas Merge pull request #102 from DerpyForks/master
Fix spelling/grammar mistake
Latest commit a23bc2f Mar 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
@Resources add: MadeForYouHub and Song Page options Oct 3, 2018
Apps/reddit Fixed bug unable to fetch at first load May 12, 2018
Extensions fix: class name change Nov 5, 2018
Themes/SpicetifyDefault fix: sidebar css style error Oct 25, 2018
.gitattributes Initial commit Feb 1, 2018
.gitignore
LICENSE Initial commit Feb 1, 2018
LOGO.svg
README.md Fix spelling mistake Mar 9, 2019
Spicetify.ini add: MadeForYouHub and Song Page options Oct 3, 2018
clean.ps1 Adds cleaning script Jul 29, 2018
globals.d.ts Add LibURI , Bridge, Cosmos, Live manually Jul 1, 2018

README.md

Logo

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

GitHub release Github All Releases Join the community on Spectrum

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.

Demo1

Outline

Custom CSS

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:

Demo2

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.

Themes

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.

Demo3

Extensions

Spicetify also allows you inject custom Javascript to support your theme or enhance your Spotify client functionalities.

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.

Christian Spotify

Auto skip explicit tracks

Ext_ChristianDemo

DJ Mode

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.

Ext_DJDemo

Queue All

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.

QueueAllDemo

Shuffle+

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.

Shuffle_1 Shuffle_2

Trash Bin

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.

Ext_Trash1 Ext_Trash2

WebNowPlaying Companion

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.

Apps

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:

Reddit

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.

RedditDemo

Check out App wiki page for some app making tips.

Community themes

Thicktify by 8roly

thicktify

How it works

Spotify UI is HTML/CSS and runs inside Chromium Embedded Framework[1]. 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

  1. Install Rainmeter if you have not.

  2. Download this repo and unzip to Documents\Rainmeter\Skins.
    or use git:

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 Nodejs and yarn to run/install some tools and scripts that make development process easier.

Credits

Thanks actionless for his oomoxify script that this skin is based on.
Thanks tjhrulz for his WebNowPlaying Browser Extension and MessagePassing plugin.

You can’t perform that action at this time.