Custom colors for lyrics

[CanYouJustWorkPlease]

Description of the new feature / enhancement

Hi there! Is there a way to accomplish this?

• Add the possibility for users to customize the lyrics colors, since the current colors are too bright and cause eye strain

If indeed it is possible but it proves it would take too much work, would it be at least possible to set as default the colors of the lyrics following the color scheme from the second picture?

Thank you!

📸 Screenshots

How lyrics currently look like (on Spotify for Windows 1.1.96.785.g464c973a):

Colors displayed for the lyrics of the song: Godsmack - Bulletproof

---

How lyrics would look like if the following colors would be applied:

Background: #000000 #121212
Past lyrics: #E40909B3 <- this hex is expressed as an RGBA value, it has 8 digits (I don't know if Spotify would support that)
Current lyrics: #C2C2C2
Next lyrics: #CA861A
"Lyrics provided by Musicmatch": #C2C2C2
Lyrics hover: #C2C2C2

[amd64fox]

Can be implemented as an additional function through incoming parameters

Any ideas with other color options?
I suggest leaving the background everywhere at #121212, so as not to spoil the main theme

[CanYouJustWorkPlease]

That's really nice! Yeah, no problem, let's keep #121212 for the background color then.

This could be another color scheme:
https://coolors.co/121212-67697c-c2c2c2-008148

I don't have any other color schemes for now, as I don't know what you might like.
You can notice in the image that I locked down the background color (#121212) and the current lyrics color (#c2c2c2) while I pressed spacebar to auto generate the other colors. If you want, you can give it a try on that site and pick some colors schemes you'd like.

A, you can also notice that the link to the color scheme has all the hexadecimals colors in the same order they appear on the site: 121212-67697c-c2c2c2-008148

It even has an "Adjust palette" section, where you can tweak the colors some more, like here:

I tried to check the contrast of the colors in Firefox for Spotify web player with my first color scheme, but unfortunately it doesn't work. I did to see if the different colored text on that black background passed the checks. You can see down below that white 4 on that black orange didn't pass the check, getting a 2.45 rating.
For some reason Firefox can't analyze the colors, like it does in this example with Wikipedia:

Chrome had something similar in the past, but they removed it in the latest versions, it was called CSS Overview. I'll see tomorrow if I can get my hands on an older version of Chrome and test it out. I just want to do this mostly out of curiosity.

What do you think, should we check the color contrast or should we just wing it? From the looks of it, Spotify didn't bother with it, since I've seen a couple of lyrics that were kind of hard to read.

P.S:
Could you tell me how you inserted that circle to match the color of the hex?

I have figured it out. I had to hit enter once, and then add `#121212`
It doesn't work though with hex coming from RGBA values.

[CanYouJustWorkPlease]

I was wrong about CSS Overview, it's still in Chrome, it seems I read an older article. Here's the result for the first color scheme:

This issue is related to the past lyrics color being #e40909b3 (dark red), but even with this issue it seems fine to me.

There was one more issue, where "Lyrics provided by Musicmatch" color was white, but now I switched it to #C2C2C2 and it seems fine, as it passed the CSS Overview test, as seen in the top picture.

Here's how it looks now:

I also switched the lyrics hover color to #C2C2C2.

You can see the changes I've made over here, in the first post.

---

Here's the results for the second theme:

It has issues with the past lyrics #67697C and next lyrics #008148 on #121212 background.
Also, past lyrics color #67697C seems too close to current lyrics color #C2C2C2. So, I think we should ditch this theme, unless we would adjust the two colors.

[amd64fox]

Added a couple of 4 color options,
1 - black and white
2 - dark yellow
3 - pink
4 - theme by @CanYouJustWorkPlease

to set the desired theme, use the incoming parameter lyrics_stat
For example I want to install theme 4: -lyrics_stat 4

[amd64fox]

If you have any ideas to add new theme, then throw it here, for example:

past lyrics - #ffffff4a
current lyrics - #ffffffc7
next lyrics - #ffffff4a
hover - #0FD40F
background of lyrics - #121212
maxmatch- #C2C2C2

[CanYouJustWorkPlease]

That's really nice! Thank you! :^D
Sure, if I'll get other themes, I'll post them here.

Just one question, what color will have the hover over the lyrics, as I'm seeing it missing from the colors attributes, will it inherit the color from current lyrics?

[amd64fox]

will it inherit the color from current lyrics?

right

[amd64fox]

will it inherit the color from current lyrics?

right

I was wrong, he did not inherit the color
added a new parameter lyrics on hover in the post above, in themes that have already been added inherited the color from current lyrics.

There are also lyrics without synchronization, now they inherit the color from the current lyrics

[CanYouJustWorkPlease]

I see. If it's not too much too ask, would it be possible to make them independent of each other, meaning current lyrics and lyrics on hover get to keep their own colors?

For example:
current lyrics: green
lyrics on hover: orange

It would be nice if I could choose another color for lyrics on hover.

[amd64fox]

I see. If it's not too much too ask, would it be possible to make them independent of each other, meaning current lyrics and lyrics on hover get to keep their own colors?

they are independent
but in your theme you specified the same color for current and hover (#C2C2C2)

you can suggest a new profile for your theme, i will update.

[CanYouJustWorkPlease]

That's really nice. :^D

I picked lyrics on hover to be #0FD40F

The whole theme over here:

past lyrics - #E40909B3
current lyrics - #C2C2C2
next lyrics - #CA861A
lyrics on hover - #0FD40F
background of lyrics - #121212
txt by Musicmatch - #C2C2C2

Thank you! You are awesome! :^D

[amd64fox]

updated

[CanYouJustWorkPlease]

Hmm, it seems past lyrics is getting applied a filter which makes the color darker, tested with Spotify for desktop with the themes implemented by you. 'past lyrics` is the only one that gets applied a filter, out of the 6 attributes. I've seen the same behavior for Spotify web player.

As an example, I used the same colors for past lyrics and next lyrics, respectively #895502, but in turn, past lyrics received #654006, while next lyrics received #895502, as seen below, tested on Spotify Desktop:

I used Just Color Picker to get the colors:

• for past lyrics:
  

• for next lyrics:
  

If you're using a blue filter app, please disable it, otherwise it's possible that Just Color Picker won't pick the real color. It happened in my case with CareUEyes.

Could you make it possible for past lyrics to keep its real color, meaning to receive #895502, instead of receiving #654006, in this case?

[CanYouJustWorkPlease]

A, it seems on Spotify web player past lyrics has been applied an opacity of 0.7

, so I guess it's the same for Spotify Desktop.

[CanYouJustWorkPlease]

Hmm, I've done some more tests, and it seems the 0.7 opacity for Spotify web player actually makes the color brighter, not darker. So, I'm not sure what's different for Spotify Desktop.

Example using #895502 for both past lyrics and next lyrics, tested on Spotify web player:

In this case past lyrics turns brighter, respectively #8E6A30, instead of turning darker, as for the case of Spotify Desktop. As with Spotify Desktop, only past lyrics gets affected on Spotify web player.

[amd64fox]

fixed attribute for past lyrics

[CanYouJustWorkPlease]

That's really nice! I just tested it out!
Thank you! You're the best! :^D

P.S:
After seeing how my theme looks like, I'd like to create a pull request to your patches.json, as I'm not happy with it. But I'll have to readjust it first.

[GREEKY69]

That's really nice. :^D

I picked lyrics on hover to be #0FD40F

The whole theme over here:

past lyrics - #E40909B3 current lyrics - #C2C2C2 next lyrics - #CA861A lyrics on hover - #0FD40F background of lyrics - #121212 txt by Musicmatch - #C2C2C2

Thank you! You are awesome! :^D

how to apply this theme

[amd64fox]

@GREEKY69
-lyrics_stat relish

[amagiriyuuka]

What about when playing on fullscreen? Since there's a feature that can either show the album art or the lyrics of the song. The theme works great but the fullscreen version still has colors based on the album art (I assume).

Lyrics with theme (royal):

Lyrics on fullscreen mode (still with the theme applied):

[PetelAnavim]

Hello, I also wanted to add a theme if that's possible. it's basically a combination of a few of the existing themes. It would be great if you could add it.

Name: lavender

past lyrics - #B8A2EA
current lyrics - #8462DD
next lyrics - #575757
hover - #F2F2F2
background of lyrics - #121212
maxmatch - #C2C2C2

By the way, sorry if I'm reviving an old thread. I'm very new to GitHub and I couldn't find a way to create a new thread.

[amd64fox]

sorry if I'm reviving an old thread.

it's okay, this topic was created just for this

at first glance your theme looks like "royal" or am I mistaken?

[PetelAnavim]

at first glance your theme looks like "royal" or am I mistaken?

No, you're right. It's basically the royal theme with a darker background and mixed a little with the purple theme as well.

[amagiriyuuka]

@amd64fox i'm wondering if you'll be adding themes for spotX, that would be a great addition! If ever that's the case, I would suggest either integrating it into the app or (which i think would be what you'd do) is add it as options for the powershell command just like the lyric themes

[PetelAnavim]

at first glance your theme looks like "royal" or am I mistaken?

No, you're right. It's basically the royal theme with a darker background and mixed a little with the purple theme as well.

Is it possible adding it? Thanks in advance

[amd64fox]

@PetelAnavim added

@amagiriyuuka
to change client themes use Spicetify, I don't have time to implement and support this in spotx.

[PetelAnavim]

@PetelAnavim added

Thanks very much

[vhc-vir]

@amd64fox
Hi, I want to add a theme. It's basically like a spotify theme with some tweaks (I tried to match the background to the color of the lyrics bar (?) on the side panel)

Name : alter (I don't have any idea for the name lol)

past lyrics - #9b9b9b
current lyrics - #1ed760
next lyrics - #666666
hover - #f2f2f2
background of lyrics - #242424
maxmatch- #C2C2C2

[amd64fox]

added it with the name spotify#2

Thanks

[vhc-vir]

added it with the name spotify#2

Thank you very much

[JumboWumbus]

Hello! I've been using this app for awhile and just did a clean windows install so ended up on the FAQs of all my fav apps!

I noticed the BG of spotify is close to gruvbox material so here's a lyric theme based on that.

past lyrics - #32302F
current lyrics - #d4be98
next lyrics - #7c6f64
hover - #e78a4e
background of lyrics - #121212
maxmatch- #282828

Also >tfw when you're trying to find what classes color the text you want

edit: changed my mind about previous lyric color :p

[amd64fox]

thanks, come up with a one word name for your theme, here is a list of existing ones

[xdr0p]

@GREEKY69 -lyrics_stat relish

sorry if its a dumb question, but can you tell me where do i need to type that in?

[amd64fox]

sorry if its a dumb question, but can you tell me where do i need to type that in?

iex "& { $(iwr -useb 'https://raw.githubusercontent.com/SpotX-Official/spotx-official.github.io/main/run.ps1') } -new_theme -lyrics_stat relish"