Site color customization via CSS stops working in 8.3.3?

[toomanybrians]

I've been setting custom colors via my own css like this:

:root {
  --md-primary-fg-color:        #e24123;
  --md-primary-fg-color--light: #e24123;
  --md-primary-fg-color--dark:  #e24123;
}

(And I link to that css via the extra_css: section in my mkdocs.yml file.

This has been working fine, and I've been on 8.2.9 (technically 8.2.9 + insiders 4.12.0). Today I decided to try the latest release, 8.3.3 / 4.17.2. However the custom colors are not taking effect in this latest release, they are back to the blue defaults, and if I use the inspector in my browser I can see that it looks like a main css is overriding them somehow? When I roll back to 8.2.9/4.12.0 the problem goes away and my custom colors work again.

So I wonder if this is a bug, or if something changed? Checking the docs, it looks like the method I'm using is still valid, so I wanted to confirm.

Thanks!
Brian

[squidfunk]

Thanks for reporting. We needed to solve some issues with custom colors not being applied in dark mode, but this made it necessary to change some of the selectors in 8.3.0. You just need to adjust the selector:

:root > * {
  --md-primary-fg-color:        #e24123;
  --md-primary-fg-color--light: #e24123;
  --md-primary-fg-color--dark:  #e24123;
}

This was already adjusted in the documentation. I'm sorry for the inconvenience this was causing you, but such changes are sometimes necessary. I'll try to anticipate them better in the future and add a note to the release notes.

[toomanybrians]

Ah, I’d checked the docs and saw the names were the same, I’d missed the > * thing. (You can tell I’m not a web developer so I didn’t even know to look there.)

All good, thanks!