How to change the Spotify skin / theme [Tutorial]

18 people liked this

How to change the Spotify skin / theme [Tutorial]

Top Star
‎2012-11-28 12:29 PM

Update (October 2015):
The skin packages below are still ONLY for old Spotify versions 0.8.5 / 0.8.8.


Community member duja found a convenient way to change the skin in version 1.0+.

Check out his instructions here.


Update (January 2014): To make it clear: Those skin packages do not work anymore for the newest versions (reason below). They only work with the old versions 0.8.5 and 0.8.8.


While I can't change the skin for the desktop player anymore, it's possible to skin the Web Player almost 100%. You can check out my darker skin for the WebPlayer here.


Note: The new white artist/album pages in version 0.8.8+ can not be changed with that method because they are web-based and not native UI elements. I'm still trying to figure out a way to do so, but so far to no avail. If you find a way, let me know please! :)


How to install already made skin packs for version 0.8.5 / 0.8.8: 
(Tutorial on Youtube)

(Download links of my skin packs are at the bottom of this post)



1. Make sure you have the correct version of Spotify


The Spotify version has to match with the version of the downloaded files, otherwise some descriptions (for example in the sidebar) might be wrong. The latest version of Spotify can differ in each country.
You can check your Spotify version like this: Go to the Spotify Menu at the top left corner  -> Help -> About Spotify

If you have the matching version you can continue with step 2.
If your version is different, do not just copy the files. You need to update the files manually (replacing steps in the instruction of download folder) or wait for a new version of this skin package.


2. Locate the file in the Spotify data folder


Normally the file is located here: %APPDATA%\Spotify\Data

Copy and paste this code into a new window and press enter.


If it’s not located at this path, use the windows search function.


3. Replace the original file with the (inside the downloaded folder) while Spotify is closed


Make sure Spotify is closed (also in the task bar), otherwise you will encounter an error message.

Unzip the downloaded skin package so you can access the "" inside the downloaded folder.
Drag the downloaded file with the right mouse button to the Spotify data folder and choose copy and replace the original file.


4. Restart Spotify


After a restart the new skin should be applied.
If you choose to keep it you’re done here. Have fun and enjoy!

If you want the original skin back, go to the downloaded folder. I’ve put an original skin file of this version in it. By repeating step 3 with this file, you can go back to the original skin in seconds. If you can’t find the downloaded folder anymore - I posted download links for the original here too.


Existing Skins:

Almost all changed bitmaps are based on the Spotify bitmaps. I’ve just changed color/contrast/etc.

Full screen pictures can be seen at this topic.



Spotify Client Version

(works for too)

Light & Bright:

Version Download

Artist View.jpg


Dark Blue:

Version Download

Artist View.jpg


True Green:

Version Download

Artist View.jpg


Noble Black:

Version Download

Artist View black.jpg


Original backup file (to go back to default skin):

Version Download



Spotify Client Version &

Note: A lot of web-based elements got updated which can not be changed e.g. Artist/Album view, playlist header.



Light & Bright:

Version Download

Version Download

Playlist View.jpg


Noble Black:

Version Download
Playlist View.jpg



Original backup file (to go back to default skin):

Version Download

Version Download





Ideas guardian - Modern Rock Playlist

Accepted Solutions

Re: How to change the Spotify skin / theme [Tutorial]

Concert Regular
‎2012-11-28 03:47 PM

I did not unzip the package :( I thought that I should rename it to

Sorry about this, now it is working..

6 people liked this

Re: How to change the Spotify skin / theme [Tutorial]

Concert VIP
‎2015-10-25 05:04 PM

I've attached the script that makes it easier to change Spotify colors (entire process is explained few posts above). You can also view or copy code from here.


To use my script you first need to download latest 7zip beta version and another batch script called repl.bat. Make sure 7zip is installed in C:\Program Files\7-Zip, and place the repl.bat in %appdata%/Spotify/Apps (just paste it in your explorers address bar to open the folder).


Before you do anything make sure you've made a backup of Apps folder so you can easily go back to default skin just in case something goes wrong.
1. Extract
In order to modify the skin files we need to extract them first. Once you've extracted the files you can modify and repack them as many times you want. So basically, when you start the batch for the first time you choose the Extract option, and you don't need to choose it anymore unless you accidentally deleted extracted files or you restored a backup and you want to start again from default skin.

2. Replace Color
Since Spotify has modular design it allows us to easily modify multiple parts of the app. All modules are located in the Apps folder and the names are mostly self-explanatory. So when you choose Replace Color option you are asked to type what modules you want to modify. If you want to select all of the modules just type *. Once you selected the module(s) the batch prompts you to type the color you're replacing and the color you want it replaced with. (Colors should be entered in hex format, for example #181818)

I'll probably update this post with list of all the colors the default skin has.
3. Repack and Replace Skin

Once you're done replacing colors choose this to repack the skin files and replace the previous ones with the ones you just made.


Note: I've only tested this on my PC using Windows 10 and Spotify Using it on different versions or modifying it might not produce any results or produce unwanted results.

1 person liked this

Re: How to change the Spotify skin / theme [Tutorial]

Festival VIP
‎2016-09-17 11:38 PM

Re-check the exact color (you may use Just Color Picker)

126 Replies
3 people liked this

Re: How to change the Spotify skin / theme [Tutorial]

Top Star
‎2012-11-28 12:30 PM

How to create your own skin:

Creating your own skin takes some time but is definitely worth it. With this tutorial you can change almost 100% of the elements in the 3 main views (Version Artist view, Top lists, Playlist view. Some elements (e.g. in profile view) can’t be changed (see “Missing elements” below) but most  are neglectable in my opinion.

The newest version ( has a lot more web-based elements which can not be changed (e.g. artist/album view, playlist header).
This tutorial is again very detailed, also providing some examples to make it easier for beginners.



1. Unzip the file into a new folder and make a backup of original


Locate the file the way I showed you before and extract the files into a new folder. With this folder you will work from now on for changing bitmaps, etc.
Don’t forget to make a copy from your original file for backup. If something goes wrong you can easily and fast get back to the original state.


2. Changing files in the resources folder


After you extracted the files into a folder you can start changing elements.


There are 3 main elements you can change:
- Bitmaps: Icons and backgrounds
- Color ci: Color of backgrounds
- Font: Color, size, shadow, etc. of fonts


But how do you know what you have to change? Don’t worry – it took me a while but I worked that out for you.
I have created charts where you can see which element is which bitmap/code line.
The charts can be downloaded here (Version 0.8.5) and here (Version 0.8.8).


For changing bitmaps you can use any image editing program you prefer.
If you got photoshop – nice! If not – that’s okay: I also used only freeware programs like MS paint and MagiX Photo Designer.
Bitmaps are located mainly in the resources folder itself but also in a couple of sub folders.


For changing color ci and fonts you need a program that can open .xml files.
Color ci and fonts can be found in the skin.xml file in the main folder and also in some .xml files of the resources\views folder (if you just see a code in the element charts it means the skin.xml file).
I used the normal “Editor” program that is installed on every Windows.

Some useful shortcuts in this editor (these functions can also be accessed through menu):
ctrl + c = copy a marked text
ctrl + v
= paste a copied text
ctrl + s
= saves your changes
ctrl + f
= opens search window (really useful, if you don’t find anything – check if the search goes up or down)


If you want to change an element that has its code in a .xml file, open this file and use the search (ctrl+f).
Search for the name you see in the charts I’ve made. For example:  <color ci="SidebarBg" for the background of the sidebar. Afterwards save your changes (ctrl+s).


Colors of backgrounds or fonts are shown in hex code: for example #000000 = black, #ffffff = white.

This website is a good site for finding the color you need. If you want to know the hex-colorname of an element in your skin, there is a useful freeware tool: ColorPix . Saved me a lot of time.


At fonts you can change different things: size, color, shadow, style.
Different styles: style=”bold”, “underline”, etc.
If you want to combine them, do not use space between it: e.g. stlye=”bold,underline”


In the code lines there are often numerous lines for 1 element. For example the lines below:
1. <font ci="TopListRowNameBig" sel="!playing,selected,focused" size="13" color="#ffffff" style="bold"/>
2. <font ci="TopListRowNameBig" sel="playing,selected,focused" size="13" color="#ffffff" style="bold" />
The only difference here is the ! before playing. “!” can be translated as no or not.
1. Line: The font style of the big name (artist) in top lists while you clicked with the mouse on it and it’s not playing.
2. Line: The font style of the big name (artist) in top lists while you clicked with the mouse on it and it is playing.

sel=”focused” = If you click with the mouse on a song it gets highlighted/focused
sel=”selected”= If you click with the mouse on it, but doesn’t have to be focused (click with mouse on another program - it is still selected in Spotify but not focused)
sel=”notavail”= Song is not available
There are some more that can be guessed by name. You will see the different “modes” for 1 element in the code.
It’s not always necessary to change all modes. You can see in my skin instructions which ones I changed or just try out yourself.


3. After you changed a file, try it out in Spotify


After you changed a bitmap or an .xml file you want to know if it brought the hoped-for effect.

If Spotify is open, close it – also in task bar. Afterwards drag the changed file with the left mouse button to the file of the Spotify\data folder. The old file in gets overwritten with your new file.

Be aware: the folder structure has to be the same! Means if you change a bitmap/xml file inside a folder, you have to save it in that extracted folder and drag the whole folder to
Example: You change the bitmap “bg” in resources\Tab bar folder. You have to drag the whole Tab bar folder (inside is your new bitmap) to the => Whole Tab bar folder gets replaced and folder structure stays same. Restart Spotify and if you’ve done it right you should see the change already.


If you like what you see and want to keep it like that: Write down what you just did!
If it was a codeline, copy the line in a new text file that documents your changes. Also write down in which .xml file!
If it was a bitmap write down the name and path to it. Also copy the changed bitmap in an extra folder!
This might be annoying but it’s really important and will save you so much time later on.

After a Spotify update, the whole file in Spotify\data folder gets rewritten (make a backup of the new original again!). Means if you didn’t save your files somewhere else, you have to start from scratch. If you saved them separately and have it well documented, you can get your skin back in a few minutes. While I’m writing this, I have used my skin for over 1 month without any update. So yes, it’s annoying to redo it again after each update but you can use it for a while before you have to do that. If you saved and wrote down everything it’s a matter of 5 minutes. Worth it!


I advise you to only change 1 element at a time and check if you like it right away.
If you change a lot of code at once and you’ve made a mistake it’s harder to track it back. Also you might lose the overview on what you’ve actually changed in this step. So 1 at a time works best!


Open 2 windows next to each other: 1 window with your extracted and the other with the data folder.
This way you can work with the extracted folder and easily drag the changed files to of the data folder.


4. After you’re finished with your skin create a file of your changed files


Once you think that you’re happy with your skin changes:
Mark all files in your extracted resources folder and create a file with them.
I’m using WinRAR for it: Mark all files, right click, extract to archive – now make sure you create a .zip file and that the name is After that it should be in your folder and you can share it if you like. Or just keep it so you can easily switch back and forth between skins.




- You’re getting an error message like this when you want to drag files to

=> You didn’t close Spotify properly. Check also in the task bar if it’s still open and close it then.


- Spotify gives you weird error messages

=> You messed up in a code line. Check your latest changes if you forgot a space before /> , # or whatever else is not correct.


- Nothing changes after you replaced a file:

=> Make sure you changed the right file (element charts). Also remember the folder structure (step 3).


- You get strange descriptions e.g. in the sidebar:
=> You’ve replaced a file of a different version than you have. Go back to the previous version or replace it with the original backup file.


Missing Elements:


Sad but true: Apparently not all elements of the desktop client can be changed. Here is a list with missing elements that are not found/not changeable (yet):


- Profile: background
- Album view: background (seriously… that gotta be changed somehow but can’t find it)
- Local files/Library: some lines in the list and the background of cover art
- Radio: completely unchangeable
- What’s new page
- Apps
- search/filter Text field

 New version

- Artist/Album view

- Playlist header


I hope I could help you with this tutorial! If you got any questions about it, feel free to post here.
If you want to share any of your self-made skins you are more than welcome too!


Have fun and enjoy the new possibilities!

Ideas guardian - Modern Rock Playlist

Re: How to change the Spotify skin / theme [Tutorial]

Community Legend
‎2012-11-28 01:11 PM

Fantastic =D 

I will have to have a play around with this when I have some spare time!



Spotify Community Mentor and Troubleshooter

Spotify Last.FM Twitter LinkedIn Meet Peter Rock Star Jam 2014

If this post was helpful, please add kudos below!

Re: How to change the Spotify skin / theme [Tutorial]

Concert Regular
‎2012-11-28 01:42 PM

For some reason the Noble Black didn't work. I have win7 desktop version (latest). When I tried to start the desktop app with new it stated that it is not able to load the skin.

Re: How to change the Spotify skin / theme [Tutorial]

Top Star
‎2012-11-28 03:19 PM

Hmm that's weird. The version is already correct.

I've tested this on 4 different pcs and it always worked (win xp, win 7 starter, 2x win 7 premium).

Do you get any error message? If yes could you please post a screenshot of it?


EDIT: Just read your other topic that spotify didn't work properly before already. Perform a clean reinstall of Spotify and make sure it works. After that try to apply the skin again, should work without a problem then! ;)

Ideas guardian - Modern Rock Playlist

Re: How to change the Spotify skin / theme [Tutorial]

Concert Regular
‎2012-11-28 03:37 PM

Here is the picture about it:


Re: How to change the Spotify skin / theme [Tutorial]

Concert Regular
‎2012-11-28 03:47 PM

I did not unzip the package :( I thought that I should rename it to

Sorry about this, now it is working..

Re: How to change the Spotify skin / theme [Tutorial]

Top Star
‎2012-11-28 03:57 PM

Oh yea that makes sense haha. Glad it's working now! :)

Haven't thought people would get that wrong, thanks for the tip - I will make it clearer in the tutorial!


The second part of the tutorial: "How to make your own skin!" is updated. Check the 2nd post.

Ideas guardian - Modern Rock Playlist

Re: How to change the Spotify skin / theme [Tutorial]

Gig Goer
‎2012-11-28 04:02 PM

"I did not unzip the package :( I thought that I should rename it to

Sorry about this, now it is working.."


This. It should be noted to unzip the green or black .zip file and inside there is the resources zip file. I thought you were supposed to rename Noble Black Spotify to but that is incorrect

Re: How to change the Spotify skin / theme [Tutorial]

Top Star
‎2012-11-28 04:06 PM

Yes, thanks for the feedback. Like I've said, I didn't think people would understand it that way.

I've added this step in the tutorial - should be clear now! Sorry about that.

Ideas guardian - Modern Rock Playlist