Overriding theme color variable started to require !important

[hellt]

Hi,
I have upgraded my mkdocs site from 4.32.4 to 4.36.0 and noticed, that the way I customized the colors for certain elements stopped working.

Here is an example in my custom CSS that changes an a element color:

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #00c9ff;

It works fine in 4.32.4, but when I upgraded to 4.36.0 this variable is overridden by the theme default values:

To overcome this, I had to use !important in my CSS next to the variable value. I wonder if this is intended.

[squidfunk]

Thanks for asking. Yes, we had to make some changes to make colors more stable across schemes, specifically because of #5206, which might make it necessary to adjust some overrides. Changes were done in 6fe1d55. Could you please share a minimal reproduction of your issue? Without this, it's hard to anticipate what's the problem, because we don't know how you configured your site or what else might be interferring.

And no, !important should only be a last or temporary resort.

[hellt]

Here is the reproduction
If you switch to slate (dark) theme the <a> color matches indigo color palette, although I am overriding this var in custom.css

I managed to only override it with !important, but as you said, this is a nogo. Likely I am not using the "right" way of overriding color vars

example.zip

[hellt]

@squidfunk just in case this discussion has missed your inbox. In case it is not, I am sorry, not meant to push, just as a reminder in case you missed the reproduction.

[squidfunk]

Still in my inbox. I'm a little tight on time right now for private reasons, but I haven't forgotten. Will definitely get back to you.

[kamilkrzyskow]

Hi @hellt , on your screenshot you can see that the

[data-md-color-scheme="slate"][data-md-color-primary="indigo"]

rule from the palette.css file isn't overridden by your

[data-md-color-scheme="slate"]

rule from the nokia.css file.

The rule from the palette.css file is more specific than the rule from the custom file, it covers both the data-md-color-scheme and data-md-color-primary. Instead of using !important increase the "range" of your rule to be as explicit as the rule from mkdocs-material, in other words add the [data-md-color-primary="indigo"] part.

EDIT: The "range" is in fact specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

[kamilkrzyskow]

In case you want to override any color, not just indigo:

[data-md-color-scheme="slate"][data-md-color-primary]

[hellt]

Thanks @kamilkrzyskow
indeed, this works like a charm. If that is intended, I am happy to run like that.

For others, here is what I had to add:

[data-md-color-scheme="slate"][data-md-color-primary="indigo"] {
  --md-typeset-a-color: #00c9ff;
/* <other rules> */
}

[squidfunk]

Thanks @kamilkrzyskow for chipping in. Indeed, this is the way to go!