topic Embedded Player Color in Spotify for Developers

Embedded Player Color

kevinviola — Fri, 09 Oct 2020 16:58:35 GMT

Country USA

Device

On any device or OS

My Question or Issue

Hi - my question is after copying and embedding the player code onto my website, all works fine (album pic shows, tracks all show and play, etc). However, the background color at the top is brown and the background color below with the tracks is very dark brown

(<iframe src="https://open.spotify.com/embed/artist/3M8M8iW5hFIfaVgGSubcaT" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>).

I noticed on the developer pages under Widgets the example shown is purple (https://developer.spotify.com/documentation/widgets/).

My site is light blue and the brown is a big contrast.

Are these colors fixed for all players (are all brown)? Or is there a place where it's drawing from to use for the background color? I can't tell from the iframe code.

I am the artist and also a light/moderate developer (not a pro developer). Any help would be very grateful so that the player can somehow match my site's color scheme.

Thanks so much!

Re: Embedded Player Color

Hubo — Wed, 14 Oct 2020 17:24:45 GMT

Hey @kevinviola, thanks for coming to this board for help!

Widgets are a great way to promote music! The background color of the widget is based on the "context"-image (artist, album, playlist).

To get something more in theme, I recommend creating a playlist with the tracks you'd like to highlight and then change the playlist image to something similar to your websites color scheme. Let me know if that works! 🙂

Have a good one,

Hubo

Re: Embedded Player Color

Baran3 — Tue, 29 Dec 2020 21:10:59 GMT

I tried that. But it didn't work. Maybe i understood wrong. i will create a playlist. then widget color of songs are going to change. isnt it?

Re: Embedded Player Color

gorillana — Fri, 20 Jan 2023 21:46:03 GMT

Hi - For Baran or any one else that might be having this issue.

To elaborate on the first reply - what worked for me changing the player to use an album from the artist, instead of the "top songs" which derives its color from the artist's profile picture.

After changing from the top songs to an album from the same artist, it no longer used the profile picture as the context image and changed from a brownish color to blueish, reflecting the color context from the album cover.

I imagine, if you made a playlist from the artist's songs, it would likely just use the same context colors if the album art is similar to the artist's profile picture.

I imagine what Hubo is recommending is being able to update the artist/song picture on Spotify for Artists where you can add your own photos (I think?), and after the change takes, it should change the player background color to reflect the updated/new picture you put for the album/artist.

Hope this helps 🙂

-Gorillana

Re: Embedded Player Color

stewie_williams — Sun, 22 Jan 2023 17:36:28 GMT

Hello everybody,

reopen this thread:
I ask you if it is possible to change the colors of the Spotify widget present in the iframe from code.
From "inspect/dev tool" of my browser I can change the style of the player but I don't know how to deploy.
Can you help me?
The image is exactly how I would like the player to look.

Thnx

Bye

Stefano

Re: Embedded Player Color

Konstantinos88 — Wed, 15 Feb 2023 15:02:15 GMT

Hi everyone,
I'm facing the same issue as the previous posters.
There are some cases where I want to use a certain image but the player's colour will not match with my design. My only alternative is to use &theme=0 for the default grey theme.
It would be amazing if there was a way to change some basic colour attributes.

A nice solution would be if the list_text_color, list_backround_color, header_backround_color, list_text_color
could be passed as url parameters eg:

src="https://open.spotify.com/embed/playlist/37i9dQZF1E35BhtCg6GwdF?utm_source=generator&list-text-color=#fff&list-backround-color=#000"

Do you believe it is possible to implement a solution similar to the one I describe ?

Thanks in advance
Konstantinos

Re: Embedded Player Color

gravemint — Sat, 02 Sep 2023 02:20:33 GMT

Did you ever figure this out?

edit: well I was replying to stewie specifically but it just posted as a general reply.

Re: Embedded Player Color

fasic — Sun, 19 Jan 2025 15:23:44 GMT

done, embed like so on your website:
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/trackYOURTRACK?utm_source=generator&theme=0" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy" style="max-width: 400px; background-color: black; list_text_color, list_backround_color: black; header_backround_color: black"></iframe>

in bold my addition to the standard embed snippet. Don't if it works on all browsers... let me know

Re: Embedded Player Color

Geoff_L_1 — Tue, 29 Jul 2025 12:06:29 GMT

The code 'theme=0' creates the black background; presumably switches off their theme. However on my browser (Google Chrome) the 'style=...' has no effect no matter how I change it.