Mkdocs-material: [help] How to add a custom color to the palette ?

[JulienBreux]

Description

Hello, thanks a lot for this beautiful theme :)

My question is really simple:

How to add a custom color to the palette ?

Thanks :)

[squidfunk]

You can either do it via custom CSS or theme customization. With custom CSS you have to target all elements on your own. Customization is the better approach. Please see the guide on customization for more information.

[JulienBreux]

Thanks!

[thetimbecker]

I'm having trouble overriding <custum_dir>/assets/stylesheets/_config.scss. I copy and pasted it from GitHub then replaced $md-color-primary and $md-color-accent with the colors I wanted. Still no change. Is that file not meant to be overridden? Is there a better way to override the main colors?

[squidfunk]

You need to build the theme to use custom colors through SCSS variables. Please see the guide on theme customization

[estan]

Hm, is it possible to perhaps make this a little easier? The docs says "If you want to make more fundamental changes, it may be necessary to make the adjustments directly in the source of the Material theme and recompile it. This is fairly easy.", but I wouldn't call just tweaking the md-color-primary and md-color-accent a fundamental change.

I think it's something that quite a few users would want to do (for example to fit some company colors), and having to set up essentially a dev environment and rebuild the entire theme just to do that is a little awkward. If it's not really feasible technically, I understand that and you can ignore this comment :)

[squidfunk]

Well, there are two ways:

• Change the variables in question and recompile the theme (as you mentioned)
• Define additional CSS and override all elements one-by-one

Most themes don't even have the first option as they have no build step. If you come up with an easier way that is still maintainable, I'm happy to integrate it.

[estan]

@squidfunk Thanks for the quick answer (!). However, I just found out that it's as simple as

theme:
  name: 'material'
  palette:
    primary: 'blue grey'
    accent: 'deep orange'

in the mkdocs.yml to tweak the primary and accent colors. This is great and very easy, I don't know why it's not in the customization docs at https://squidfunk.github.io/mkdocs-material/customization/ :)

[squidfunk]

Oh, I thought you already knew that. It's not in the customization docs because it's considered configuration and therefore listed in the getting started guide

[estan]

@squidfunk Bah, I went straight for "Customization" and totally missed this. Thanks. I see now though that this must be a named color from the Material Design color palette, e.g. "#abcdef" would not work? (would require theme rebuilding).

[squidfunk]

That is correct. Material provides shades for all colors from the Material Design color palette. In order to use custom colors you need to follow one of the steps outlined above. Note that when you decide on customization and define the variables, the theme will also adjust all derived colors (i.e. darker and lighter shades) from the primary colors which you would have to do on your own when overriding with custom CSS.

[estan]

Yes, makes total sense. Thanks.

[estan]

(and I see no obvious way of simplifying adding a custom color, due to the static nature of CSS)

[squidfunk]

We've been iterating on this topic for quite some time ;-)