Changing theme of the Spotify app on desktop
Bored from default Spotify dark theme on its desktop application? wanna try out new themes or wanna built some new themes for it on your own, well it’s possible and in this blog, I am gonna guide you through all process. When we talk about UI of desktop application it mainly consists of Js, CSS, HTML and here we will be changing themes by injecting our custom CSS.
This thing is possible because of an application named Spicetify-Cli created by Khanhas.
It’s recommended that don’t use Spotify from the windows store because your changes will get vanished after the application closes.
I am gonna tell you the installation on windows but if you have Linux or Mac then you can check the installation info here.
Open Powershell as admin and type the following line.
Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/khanhas/spicetify-cli/master/install_curl.ps1" | Invoke-Expression
Now, wait until it finishes the installation.
Now type commands in PowerShell again
spicetify //to generate config file
spicetify backup apply enable-devtool // to enable developer tools
NOTE — “C:\Users\Username\spicetify-cli” this is the default path of application on Windows.
Now it’s time to choose a theme, Spicetify Users created a variety of themes you can find them here (you can clone this entire folder).
Choose any theme you like then open that folder and copy color.ini and user.css
Now it’s time to apply some themes, follow this path C:\Users\Username\spicetify-cli\Themes\SpicetifyDefault
You will see two files like this, Now replace these two files with your copied color.ini and user.css
Then open PowerShell/Cmd and type
spicetify update
spicetify restart
You will find that your default theme has been applied to Spotify Application.
NOTE — If want to make your own theme then you can change the user.css and color.ini accordingly.
You can also add some extensions to your Spotify Application. For Demo, I have installed this extension named New Releases (shows newly released songs in the past 30 days).
To install extensions type the following command in Powershell/CMD
spicetify config extensions newReleases.js
spicetify apply
To see the list of available extensions you can check C:\Users\Username\spicetify-cli\Extensions or Here.