Documentation for theme CSS overrides

[johnthagen]

At

• New darker slate theme feels like it lacks contrast/readability #6061 (comment)

it was shown how to override specific CSS settings in the base slate theme. Is there a place that this is documented so that if someone wanted to tweak other settings, they would know where to look (like some kind of reference)?

The docs mention extra.css (which we have used) but not what all of the theme options are:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css

If this is supported, could something be added to the docs about this? For example, if someone wanted to tweak the title foreground color, background color, etc? Perhaps a link to the source files in the repo that should be read to learn about the CSS options?

[squidfunk]

Thanks for asking. We mention it in our custom color guide that links to the color definitions, i.e., the variables which you can override. There's also a related example that you can inspect and download, that shows you how to apply custom colors.

That being said, it is impossible for us to provide a guide how to change every aspect of Material for MkDocs, e.g., header, footer, you name it, because there are just so many things that you can change (= everything). We will provide more examples in the future, but in the end, if you want to override specific parts of the CSS, you should inspect the element with your browsers console to learn which class you need to apply. We might create a tutorial for this in the future, but please understand that you'd we presume a basic knowledge of CSS for extensive customization.

[johnthagen]

Here is a repo where you can see the issue, if this is in fact an issue:

• https://github.com/johnthagen/python-blueprint/tree/material-mkdocs-9.4

[squidfunk]

Is it possible that the h1 color styling is hard coded to light mode, even for slate theme? Sorry if as I am in investigating this further this is turning into a possible bug report.

No. It's set to whatever value --md-default-fg-color--light has, which is defined for both color schemes.

[sjrothfuss]

I see the same, changing h1 color in stylesheets/extra.css does nothing, changing h2 color works.

[squidfunk]

Are you using .md-typeset h1 as a selector? You must use a selector of same or greater specificity.

[sjrothfuss]

Sorry to not engage on that point. Yes, adding .md-typeset changes h1 and that is not required for h2, i.e. this turns both headers red.

docs/stylesheets/extra.css:

.md-typeset h1 {
    color: red;
}

h2 {
    color: red;
}

I think I've just muddied the water. Apologies.