My sites --md-primary-fg-color get overridden

[PEZ]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

I have extra_css that defines the primary colors, like so:

:root {
    --md-primary-fg-color: rgb(219, 149, 80);
    --md-accent-fg-color: rgb(144, 180, 254);
}

This has always worked. But with version 8.5.9 some other colors are used instead. I see this in the inspector:

[data-md-color-primary=indigo] {
    --md-primary-fg-color: #4051b5;
    --md-primary-fg-color--light: #5d6cc0;
    --md-primary-fg-color--dark: #303fa1;
    --md-primary-bg-color: #fff;
    --md-primary-bg-color--light: hsla(0,0%,100%,.7);
}

Expected behaviour

I expect my extra_css colors to be used.

Actual behaviour

Some other colors are used.

Steps to reproduce

Use this extra_css:

:root {
    --md-primary-fg-color: rgb(219, 149, 80);
    --md-accent-fg-color: rgb(144, 180, 254);
}

With 8.5.8 the colors are used, with 8.5.9 they are not

Package versions

• Python: 3.9.7
• MkDocs: 1.4.1
• Material: 8.5.9

Configuration

I haven't minimized this.

System information

• Operating system: All
• Browser: All

[squidfunk]

Thanks for reporting. Does the following work?

[data-md-color-scheme="default"] {
    --md-primary-fg-color: rgb(219, 149, 80);
    --md-accent-fg-color: rgb(144, 180, 254);
}

If it works, we need to update the documentation. We needed to change the way color variables are defined (see the changelog of 8.5.9 and the linked issues). It is likely related to the change, so the CSS might need to be adapted. I'm sorry for the inconvenience.

[PEZ]

Thanks for looking at this so quickly! 🙏

Yes, the suggested change works. 🎉

[beoliver]

I noticed this the other day and found that explicitly setting palette to the empty object worked.

theme:
  name: material
  palette: {}
  ...

[squidfunk]

I've revisited this regression and think I've found a better solution in 078a411 and c62ff2c. Now, primary and accent colors are, by default, set to the indigo color values without explicitly setting the primary and accent values in mkdocs.yml. For this to work, they need to be defined at :root. Overriding colors should now again work as explained in the documentation. If the author sets a value for primary in mkdocs.yml, this value will take precedence over custom colors.

This means that the workaround I mentioned in #4620 (comment) should no longer be necessary. Please note that it is extremly hard to foresee all possible uses and ways of overriding CSS that authors use, which is why the regression was introduced in the first place. However, from my best knowledge, we can consider this issue (#4620) and #4594 fixed.

[squidfunk]

Released as part of 8.5.10.