Customise the Spotify UI theme

15 May 2020

I loved Rdio. Unfortunately, it was eclipsed by the popularity of Spotify and eventually had to close down forcing me to change music streaming services. Ever since switching I have missed that clean, flat and beautiful light themed app.

To my absolute joy, I recently discovered that there is an unofficial way to customise the look of Spotify using a tool called Spicetify.

Spotify with Spicetify's default light theme

Install spicetify

I predominantly use MacOS and already have the homebrew package manager installled making that the most convenient method to install Spicetify.

brew install khanhas/tap/spicetify-cli

Your own setup and requirements may differ. If so read up on the alternate Spicetify installation instructions for Linux, Windows and Mac.

Generate the config file

Once installation has completed you need to run Spicetify once without any parameters to generate the config file.

spicetify

To find out where the configuration file has been saved on your operating system you can use the -c parameter.

spicetify -c

On MacOS it saves to ~/spicetify_data/config.ini.

Backup the current Spotify configuration

Before we can apply a theme we need to run a backup in case we need to rollback upon an error.

spicetify backup

Apply the default light theme

You're just one more command away from applying the default light theme that ships with Spicetify.

spicetify apply

Open Spotify and you will now be greeted with a truly beautiful light interface.

Spotify with Spicetify's default light theme

Add new themes

Perhaps you want to explore creating your own theme or applying themes created by others. There is a repository of Spicetify themes if you wanted some inspiration.

Install any custom themes into a Themes directory within your Spicetify's data directory. For example, on MacOS you would install these into ~/spicetify_data/Themes.

Once you have chosen a new look for Spotify you will need to run a command to set that in your config.

spicetify config current_theme NAME_OF_THEME_HERE

Now that a new custom theme is set in your config its time to apply that to Spotify.

spicetify apply

Use SpicetifyDefault as the current_theme if you ever wish to revert back to the original Spicetify light theme.

Restore the original Spotify interface

You can quickly revert back to the default Spotify theme.

spicetify config inject_css 0 replace_colors 0
spicetify apply

No Such File error

You might get an error upon running spicetify.

fatal open /Applications/Spotify.app/Contents/Resources/Apps/zlink/css/user.css: no such file or directory

You can fix this by reapplying your theme.

spicetify apply
Share this article
Was this post helpful?
Buy me a coffeeBuy me a coffee
About
I am a London based web developer currently focused on JavaScript, Node and React. Get in touch if you wish to compare eslint configs or debate the deadliest enemy in videogame history (spoiler alert: it was the first goomba).
© 39digits 2020