Theme Color Styling

Martin Donath a.k.a. SquidFunc, the author of the beautiful MkDocs Material theme for the famous MkDocs documentation site generator has written a big Getting Started guide.

I have used this theme and this guide to set up this website with my personal documentation. I was fascinated by the styling section in relation to colors and accents. The big question however was how to achieve the effect of rows of color swatches instead of one long column. I have not figured out how Martin did it on his website. Instead, I have managed to achieve the same by using <div class="flex-container"> inline in the Markdown document (see the source code of this page in my repo). So, I have included the color sections of the official guide to demo this alternative approach.

Color palette

A default hue is defined for every primary and accent color on Google’s
Material Design color palette, which makes it very easy to change the
overall look of the theme. Just set the primary and accent colors using the
following variables:

theme:
  palette:
    primary: 'indigo'
    accent: 'indigo'

Color names are case-insensitive, but must match the names of the Material
Design color palette. Valid values are: red, pink, purple, deep purple,
indigo, blue, light blue, cyan, teal, green, light green, lime,
yellow, amber, orange, deep orange, brown, grey, blue grey and
white. The last four colors can only be used as a primary color.

If the color is set via this configuration, an additional CSS file that
defines the color palette is automatically included. If you want to keep things
lean, clone the repository and recompile the theme with your custom colors set.

Primary colors

Default: indigo

Click on a tile to change the primary color of the theme:

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Grey Blue Grey White

Accent colors

Default: indigo

Click on a tile to change the accent color of the theme:

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange

A default hue is defined for every primary and accent color on Google’s Material Design color palette, which makes it very easy to change the overall look of the theme. Just set the primary and accent colors using the following variables:

theme:
  palette:
    primary: 'indigo'
    accent: 'indigo'

Color names are case-insensitive, but must match the names of the Material Design color palette. Valid values are: red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown, grey, blue grey and white. The last four colors can only be used as a primary color.

Compile your own custom color theme

If the color is set via this configuration, an additional CSS file that defines the color palette is automatically included. If you want to keep things lean, clone the repository and recompile the theme with your custom colors set. See the guide on customization for more information.

---