Material Theme Not Applying Primary Color from mkdocs.yml

[jwwojak]

I wanted to try and change the default material theme using hex color code in my mkdocs.yml file.

The usual way of using text (e.g. red, green, blue) for the color (as described in primary color and accent color) work as expected.

However, I guess using hex values for palette.primary and palette.accent don't work, even though there are no build errors. Here's my simple .yml file:

theme:
  name: material
  palette:
    primary: '#FF0000'
    accent: '#00BDFF'

Primary is red (#FF0000)
Accent is a light blue (#00BDFF)

Build and then run the server shows the page in the default Material theme colors. Tested on Chrome, FF, and Safari.

I have tried using a CSS override, and that works fine, but just wanted to see if the simpler mkdocs.yml file would accept those and it doesn't seem to.

Am I doing something wrong or is this expected behavior? Thank you.

[mocdaniel]

This is expected behavior as per the docs on custom color palettes.

If you want to use custom colors not aliased by the builtin color variables (red, green, blue, indigo etc.), you'll need to do the following:

1. Set the palette(s) colors to custom:

   theme:
     palette:
       primary: custom
       accent: custom
   

2. Configure color variables in e.g. docs/stylesheets/extra.css:

   :root  > * {
     --md-primary-fg-color: #FF0000;
     --md-accent-fg-color:  #00BDFF;
   }

3. Configure Material to use the additional CSS:

   extra_css:
     - stylesheets/extra.css

You can also define custom color palettes this way and reference them in your mkdocs.yaml, see the first link above.

Hope that helps!

[jwwojak]

Hey, thank you for the response! It's a great help.