[core] wrong color variable names after new UI update

[Tetrax-10]

🔍 Have you checked Spicetify.app page for your issue?

• I have checked the FAQ

🔍 Is there already an issue for your problem?

• I have checked older issues, open and closed

ℹ Environment / Computer Info

- Spotify version: 1.1.94.872.g7a9200fe
- Spicetify version: 2.13.1

📝 Description

Wrong color variable names after new UI update

📸 Screenshots

Player

Sidebar

[kyrie25]

If you are able to, can you test some more and maybe provide an comprehensive list of which color variables are incorrectly applied? Would speed up the process by a lot.

[kyrie25]

Currently Spotify supports both their legacy and new layout at the same time as shown in their xpui.css

Though it may be temporarily patched via Regexp selecting those specific styles with .nav-alt, or to forcefully apply the colors with !important, it seems as though once Spotify themselves decides to dump the legacy layout from their releases both these solutions won't be plausible anymore.

For --spice-sidebar, the colors are now shared with --spice-main as they share the same CSS variable:

As for the player, their color is now shared with the black background of the whole app (via setting background: none)

Both of these can't be simply solved by changing values in the xpui files, nor does looking for specific class names and change the ruleset as it would require classes to be mapped at all times, while Spotify client's HTML layout and CSS ruleset applied to them are subjected to change at any times.

Currently I have come up with 2 stable solutions:

1. Maintain our own CSS snippet bundled into the CLI to somewhat preserve the colorings of previous themes.

• This, in itself, is not really stable because of the aforementioned points, we would probably need to publish a lot more releases to match the stylings once it changes and the CSS map must always be patched right after a class name changes.
• We could also shift this onto Marketplace's side, and have it maintained there, but not sure how stable it would be still. The caveat for this however, is that users have to be made aware that such snippet exists and install them, else legacy themes would still break their client.

2. Change the current color.ini color key strings to adapt with the new UI.

• Specifically, we would need to phase out --spice-sidebar and --spice-player in favor of a new color key for the client's background, as those key names are no longer accurate and does not serve the same purpose as before.
• This would require all current theme developers to adapt with the new changes, but it would ensure better maintainability in the long run (at least as long as this layout is used), as patching colors would only depend in the color values like it does currently and we would not need to publish CLI releases as often.

Either way, we will need to phase out on some support for the legacy layout as the color values are different to avoid replacing colors of the wrong element as shown on this issue.
May I have your opinions on this? @afonsojramos

[Tetrax-10]

If you ask me, I will go with 2nd, stable solution, we should always go with the flow of Spotify updates. So, it will be easy to maintain. Theme's devs should adopt to new updates. we should prob wait for their new UI final release as current CSS is supporting two diff UIs and color schemes. once a/b testing is over we will get their new color scheme and then we adopt that and release a patched CLI.

[Tetrax-10]

If you are able to, can you test some more and maybe provide an comprehensive list of which color variables are incorrectly applied? Would speed up the process by a lot.

the whole thing has changed. As mentioned in the above comment we should wait for Spotify to stable release their UI

[kyrie25]

If you ask me, I will go with 2nd, stable solution, we should always go with the flow of Spotify updates. So, it will be easy to maintain. Theme's devs should adopt to new updates. we should prob wait for their new UI final release as current CSS is supporting two diff UIs and color schemes. once a/b testing is over we will get their new color scheme and then we adopt that and release a patched CLI.

I do also prefer following the 2nd solution as it'd be more sensible to do so, but as this is a major breaking change, we need many different perspectives and opinions before going forward so as to make it the most beneficial for all current, new theme devs and the users.

[github-actions]

Marking this issue as stale.

Let someone know if I'm wrong, after all, I'm just a bot!

[github-actions]

Marking this issue as stale.

Let someone know if I'm wrong, after all, I'm just a bot!

[github-actions]

Marking this issue as stale.

Let someone know if I'm wrong, after all, I'm just a bot!

[github-actions]

Marking this issue as stale.

Let someone know if I'm wrong, after all, I'm just a bot!

[CursedSpiderBoi]

we still have this issue?

[github-actions]

Marking this issue as stale.

Let someone know if I'm wrong, after all, I'm just a bot!

[github-actions]

Marking this issue as stale.

Let someone know if I'm wrong, after all, I'm just a bot!

[ok-coder1]

What happened to GitHub Actions? It's marking stale after stale after stale after stale and so on...

But this issue is stale. It was opened in 2022 and it's 2024 now (2 years).

[ok-coder1]

Anyway, is this issue fixed?

[rxri]

What happened to GitHub Actions? It's marking stale after stale after stale after stale and so on...

But this issue is stale. It was opened in 2022 and it's 2024 now (2 years).

Any activity related to this issue is marked as „not stale anymore”
And no, it’s not fixed

[github-actions]

Marking this issue as stale.

Let someone know if I'm wrong, after all, I'm just a bot!

[Delusoire]

The groundwork for this is already set:

• https://github.com/spicetify/modules/blob/main/modules/palette-manager/palette.ts#L16-L32
• https://github.com/spicetify/modules/blob/main/modules/palette-manager/index.scss

We just need to all agree on a list of standardized variable names.

For reference, this is the complete list of variables that Spotify uses (both in JS and CSS) as of 1.2.41:

{
    "base": {
        "background": {
            "base": "#ffffff",
            "highlight": "#f6f6f6",
            "press": "#b7b7b7",
            "elevated": {
                "base": "#ffffff",
                "highlight": "#f6f6f6",
                "press": "#b7b7b7"
            },
            "tinted": {
                "base": "rgba(0, 0, 0, 0.08)",
                "highlight": "rgba(0, 0, 0, 0.05)",
                "press": "rgba(0, 0, 0, 0.12)"
            }
        },
        "text": {
            "base": "#000000",
            "subdued": "#6a6a6a",
            "brightAccent": "#117a37",
            "negative": "#d31225",
            "warning": "#9d5a00",
            "positive": "#117a37",
            "announcement": "#0c67d3"
        },
        "essential": {
            "base": "#000000",
            "subdued": "#878787",
            "brightAccent": "#169b45",
            "negative": "#e91429",
            "warning": "#c77200",
            "positive": "#169b45",
            "announcement": "#0d72ea"
        },
        "decorative": {
            "base": "#000000",
            "subdued": "#dedede"
        }
    },
    "brightAccent": {
        "background": {
            "base": "#1ed760",
            "highlight": "#1fdf64",
            "press": "#169c46",
            "elevated": {
                "base": "#1fdf64",
                "highlight": "#1fdf64",
                "press": "#169c46"
            },
            "tinted": {
                "base": "#1ed760",
                "highlight": "#1ed760",
                "press": "#1ed760"
            }
        },
        "text": {
            "base": "#000000",
            "subdued": "#000000",
            "brightAccent": "#000000",
            "negative": "#000000",
            "warning": "#000000",
            "positive": "#000000",
            "announcement": "#000000"
        },
        "essential": {
            "base": "#000000",
            "subdued": "#000000",
            "brightAccent": "#000000",
            "negative": "#000000",
            "warning": "#000000",
            "positive": "#000000",
            "announcement": "#000000"
        },
        "decorative": {
            "base": "#000000",
            "subdued": "#1abc54"
        }
    },
    "negative": {
        "background": {
            "base": "#e91429",
            "highlight": "#de1327",
            "press": "#920d1a",
            "elevated": {
                "base": "#de1327",
                "highlight": "#de1327",
                "press": "#920d1a"
            },
            "tinted": {
                "base": "#e91429",
                "highlight": "#e91429",
                "press": "#e91429"
            }
        },
        "text": {
            "base": "#ffffff",
            "subdued": "#ffffff",
            "brightAccent": "#ffffff",
            "negative": "#ffffff",
            "warning": "#ffffff",
            "positive": "#ffffff",
            "announcement": "#ffffff"
        },
        "essential": {
            "base": "#ffffff",
            "subdued": "#ffffff",
            "brightAccent": "#ffffff",
            "negative": "#ffffff",
            "warning": "#ffffff",
            "positive": "#ffffff",
            "announcement": "#ffffff"
        },
        "decorative": {
            "base": "#ffffff",
            "subdued": "#ee3a4c"
        }
    },
    "negativeSubdued": {
        "background": {
            "base": "#ffd2d7",
            "highlight": "#ffdde1",
            "press": "#ff7988",
            "elevated": {
                "base": "#ffdde1",
                "highlight": "#ffdde1",
                "press": "#ff7988"
            },
            "tinted": {
                "base": "#ffd2d7",
                "highlight": "#ffd2d7",
                "press": "#ffd2d7"
            }
        },
        "text": {
            "base": "#590810",
            "subdued": "#590810",
            "brightAccent": "#590810",
            "negative": "#590810",
            "warning": "#590810",
            "positive": "#590810",
            "announcement": "#590810"
        },
        "essential": {
            "base": "#590810",
            "subdued": "#590810",
            "brightAccent": "#590810",
            "negative": "#590810",
            "warning": "#590810",
            "positive": "#590810",
            "announcement": "#590810"
        },
        "decorative": {
            "base": "#590810",
            "subdued": "#ffb9c1"
        }
    },
    "warning": {
        "background": {
            "base": "#ffa42b",
            "highlight": "#ffaf45",
            "press": "#c57100",
            "elevated": {
                "base": "#ffaf45",
                "highlight": "#ffaf45",
                "press": "#c57100"
            },
            "tinted": {
                "base": "#ffa42b",
                "highlight": "#ffa42b",
                "press": "#ffa42b"
            }
        },
        "text": {
            "base": "#000000",
            "subdued": "#000000",
            "brightAccent": "#000000",
            "negative": "#000000",
            "warning": "#000000",
            "positive": "#000000",
            "announcement": "#000000"
        },
        "essential": {
            "base": "#000000",
            "subdued": "#000000",
            "brightAccent": "#000000",
            "negative": "#000000",
            "warning": "#000000",
            "positive": "#000000",
            "announcement": "#000000"
        },
        "decorative": {
            "base": "#000000",
            "subdued": "#f18900"
        }
    },
    "warningSubdued": {
        "background": {
            "base": "#ffd97e",
            "highlight": "#ffe3a0",
            "press": "#d79800",
            "elevated": {
                "base": "#ffe3a0",
                "highlight": "#ffe3a0",
                "press": "#d79800"
            },
            "tinted": {
                "base": "#ffd97e",
                "highlight": "#ffd97e",
                "press": "#ffd97e"
            }
        },
        "text": {
            "base": "#491e00",
            "subdued": "#491e00",
            "brightAccent": "#491e00",
            "negative": "#491e00",
            "warning": "#491e00",
            "positive": "#491e00",
            "announcement": "#491e00"
        },
        "essential": {
            "base": "#491e00",
            "subdued": "#491e00",
            "brightAccent": "#491e00",
            "negative": "#491e00",
            "warning": "#491e00",
            "positive": "#491e00",
            "announcement": "#491e00"
        },
        "decorative": {
            "base": "#491e00",
            "subdued": "#ffc742"
        }
    },
    "positive": {
        "background": {
            "base": "#1ed760",
            "highlight": "#1fdf64",
            "press": "#169c46",
            "elevated": {
                "base": "#1fdf64",
                "highlight": "#1fdf64",
                "press": "#169c46"
            },
            "tinted": {
                "base": "#1ed760",
                "highlight": "#1ed760",
                "press": "#1ed760"
            }
        },
        "text": {
            "base": "#000000",
            "subdued": "#000000",
            "brightAccent": "#000000",
            "negative": "#000000",
            "warning": "#000000",
            "positive": "#000000",
            "announcement": "#000000"
        },
        "essential": {
            "base": "#000000",
            "subdued": "#000000",
            "brightAccent": "#000000",
            "negative": "#000000",
            "warning": "#000000",
            "positive": "#000000",
            "announcement": "#000000"
        },
        "decorative": {
            "base": "#000000",
            "subdued": "#1abc54"
        }
    },
    "positiveSubdued": {
        "background": {
            "base": "#96f0b6",
            "highlight": "#b2f4c9",
            "press": "#1bbc54",
            "elevated": {
                "base": "#b2f4c9",
                "highlight": "#b2f4c9",
                "press": "#1bbc54"
            },
            "tinted": {
                "base": "#96f0b6",
                "highlight": "#96f0b6",
                "press": "#96f0b6"
            }
        },
        "text": {
            "base": "#073116",
            "subdued": "#073116",
            "brightAccent": "#073116",
            "negative": "#073116",
            "warning": "#073116",
            "positive": "#073116",
            "announcement": "#073116"
        },
        "essential": {
            "base": "#073116",
            "subdued": "#073116",
            "brightAccent": "#073116",
            "negative": "#073116",
            "warning": "#073116",
            "positive": "#073116",
            "announcement": "#073116"
        },
        "decorative": {
            "base": "#073116",
            "subdued": "#60e890"
        }
    },
    "announcement": {
        "background": {
            "base": "#0d72ea",
            "highlight": "#0c6ddf",
            "press": "#084791",
            "elevated": {
                "base": "#0c6ddf",
                "highlight": "#0c6ddf",
                "press": "#084791"
            },
            "tinted": {
                "base": "#0d72ea",
                "highlight": "#0d72ea",
                "press": "#0d72ea"
            }
        },
        "text": {
            "base": "#ffffff",
            "subdued": "#ffffff",
            "brightAccent": "#ffffff",
            "negative": "#ffffff",
            "warning": "#ffffff",
            "positive": "#ffffff",
            "announcement": "#ffffff"
        },
        "essential": {
            "base": "#ffffff",
            "subdued": "#ffffff",
            "brightAccent": "#ffffff",
            "negative": "#ffffff",
            "warning": "#ffffff",
            "positive": "#ffffff",
            "announcement": "#ffffff"
        },
        "decorative": {
            "base": "#ffffff",
            "subdued": "#2a86f3"
        }
    },
    "announcementSubdued": {
        "background": {
            "base": "#c8e0fc",
            "highlight": "#d6e8fd",
            "press": "#62a7f6",
            "elevated": {
                "base": "#d6e8fd",
                "highlight": "#d6e8fd",
                "press": "#62a7f6"
            },
            "tinted": {
                "base": "#c8e0fc",
                "highlight": "#c8e0fc",
                "press": "#c8e0fc"
            }
        },
        "text": {
            "base": "#052a56",
            "subdued": "#052a56",
            "brightAccent": "#052a56",
            "negative": "#052a56",
            "warning": "#052a56",
            "positive": "#052a56",
            "announcement": "#052a56"
        },
        "essential": {
            "base": "#052a56",
            "subdued": "#052a56",
            "brightAccent": "#052a56",
            "negative": "#052a56",
            "warning": "#052a56",
            "positive": "#052a56",
            "announcement": "#052a56"
        },
        "decorative": {
            "base": "#052a56",
            "subdued": "#a5ccfa"
        }
    },
    "invertedDark": {
        "background": {
            "base": "#000000",
            "highlight": "#0d0d0d",
            "press": "#3f3f3f",
            "elevated": {
                "base": "#0d0d0d",
                "highlight": "#0d0d0d",
                "press": "#3f3f3f"
            },
            "tinted": {
                "base": "#000000",
                "highlight": "#000000",
                "press": "#000000"
            }
        },
        "text": {
            "base": "#ffffff",
            "subdued": "#8f8f8f",
            "brightAccent": "#1ed760",
            "negative": "#ffffff",
            "warning": "#ffffff",
            "positive": "#ffffff",
            "announcement": "#ffffff"
        },
        "essential": {
            "base": "#ffffff",
            "subdued": "#5e5e5e",
            "brightAccent": "#1ed760",
            "negative": "#ffffff",
            "warning": "#ffffff",
            "positive": "#ffffff",
            "announcement": "#ffffff"
        },
        "decorative": {
            "base": "#ffffff",
            "subdued": "#1f1f1f"
        }
    },
    "invertedLight": {
        "background": {
            "base": "#ffffff",
            "highlight": "#f6f6f6",
            "press": "#b7b7b7",
            "elevated": {
                "base": "#f6f6f6",
                "highlight": "#f6f6f6",
                "press": "#b7b7b7"
            },
            "tinted": {
                "base": "#ffffff",
                "highlight": "#ffffff",
                "press": "#ffffff"
            }
        },
        "text": {
            "base": "#000000",
            "subdued": "#5e5e5e",
            "brightAccent": "#12833a",
            "negative": "#000000",
            "warning": "#000000",
            "positive": "#000000",
            "announcement": "#000000"
        },
        "essential": {
            "base": "#000000",
            "subdued": "#8f8f8f",
            "brightAccent": "#17a449",
            "negative": "#000000",
            "warning": "#000000",
            "positive": "#000000",
            "announcement": "#000000"
        },
        "decorative": {
            "base": "#000000",
            "subdued": "#dedede"
        }
    },
    "mutedAccent": {
        "background": {
            "base": "#121212",
            "highlight": "#1a1a1a",
            "press": "#000000",
            "tinted": {
                "base": "rgba(255, 255, 255, 0.07)",
                "highlight": "rgba(255, 255, 255, 0.1)",
                "press": "rgba(255, 255, 255, 0.04)"
            },
            "elevated": {
                "base": "#1a1a1a",
                "highlight": "#1a1a1a",
                "press": "#000000"
            }
        },
        "text": {
            "base": "#ffffff",
            "subdued": "#a7a7a7",
            "brightAccent": "#1ed760",
            "negative": "#ffffff",
            "warning": "#ffffff",
            "positive": "#ffffff",
            "announcement": "#ffffff"
        },
        "essential": {
            "base": "#ffffff",
            "subdued": "#727272",
            "brightAccent": "#1ed760",
            "negative": "#ffffff",
            "warning": "#ffffff",
            "positive": "#ffffff",
            "announcement": "#ffffff"
        },
        "decorative": {
            "base": "#ffffff",
            "subdued": "#292929"
        }
    },
    "overMedia": {
        "background": {
            "base": "rgba(0, 0, 0, 0.54)",
            "highlight": "rgba(0, 0, 0, 0.56)",
            "press": "rgba(0, 0, 0, 0.72)",
            "elevated": {
                "base": "rgba(0, 0, 0, 0.56)",
                "highlight": "rgba(0, 0, 0, 0.56)",
                "press": "rgba(0, 0, 0, 0.72)"
            },
            "tinted": {
                "base": "rgba(0, 0, 0, 0.54)",
                "highlight": "rgba(0, 0, 0, 0.54)",
                "press": "rgba(0, 0, 0, 0.54)"
            }
        },
        "text": {
            "base": "#ffffff",
            "subdued": "#ffffff",
            "brightAccent": "#ffffff",
            "negative": "#ffffff",
            "warning": "#ffffff",
            "positive": "#ffffff",
            "announcement": "#ffffff"
        },
        "essential": {
            "base": "#ffffff",
            "subdued": "#ffffff",
            "brightAccent": "#ffffff",
            "negative": "#ffffff",
            "warning": "#ffffff",
            "positive": "#ffffff",
            "announcement": "#ffffff"
        },
        "decorative": {
            "base": "#ffffff",
            "subdued": "rgba(255, 255, 255, 0.13)"
        }
    }
}

[Delusoire]

@rxri @harbassan @ohitstom @surfbryce

[Delusoire]

The CSS contains double this amount of variables, one set for encore-dark-theme and another one for encore-light-theme.
So 25*14*2=700 total variables, though only base, negativeSubdued, warningSubdued, positiveSubdued, announcementSubdued, muteAccent seem to have different values for dark and light.

[harbassan]

spotify uses their own variables so inconsistently that it serves no purpose to map anything but a few of these (probably the ones i've already done). Most of the time a theme will define a new variable and use it themselves where appropriate anyway, so its not actually that important.

[harbassan]

even the default "theme" has quite a bit of css just to overwrite some absolute colours on various elements.

[Delusoire]

spotify uses their own variables so inconsistently that it serves no purpose to map anything but a few of these (probably the ones i've already done). Most of the time a theme will define a new variable and use it themselves where appropriate anyway, so its not actually that important.

They're actually using their theme variables quite a lot, both in CSS and JS. I still think there is a lot of value in accurately mapping most of those (and we can do a few things to reduce the number of exposed vars)