7

I am using mkdocs-material for creating a documentation website. How do I specify my own custom primary color and secondary color?

I dont want to use any of the existing colors

enter image description here

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
Bilal Fazlani
  • 6,727
  • 9
  • 44
  • 90

2 Answers2

11

I found the way.

First you create an extra.css in docs/stylesheets/

:root {

    /* Primary color shades */
    --md-primary-fg-color: #861f41;
    --md-primary-fg-color--light: #861f4194;
    --md-primary-fg-color--dark: #ac325a;
    --md-primary-bg-color: hsla(0, 0%, 100%, 1);
    --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
    --md-text-link-color: hsla(231, 48%, 48%, 1);

    /* Accent color shades */
    --md-accent-fg-color: rgb(98, 18, 189);
    --md-accent-fg-color--transparent: hsla(189, 100%, 37%, 0.1);
    --md-accent-bg-color: hsla(0, 0%, 100%, 1);
    --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
  }
  
  :root > * {
  
    /* Code block color shades */
    --md-code-bg-color: hsla(0, 0%, 96%, 1);
    --md-code-fg-color: hsla(200, 18%, 26%, 1);

    /* Footer */
    --md-footer-bg-color: #861f41;
    --md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);
    --md-footer-fg-color: hsla(0, 0%, 100%, 1);
    --md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);
    --md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.3);
  }

Then configure it in mkdocs.yml

extra_css:
  - stylesheets/extra.css

Note: Setting hyperlink color with '--md-text-link-color' has been deprecated by '--md-typeset-a-color'. One can read all the color definitions at:

https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss

digitalrust
  • 3
  • 4
Bilal Fazlani
  • 6,727
  • 9
  • 44
  • 90
  • did the `--md-text-link-color` work for you? I am trying to get the hyperlinks to be a different color than the `--md-primary-fg-color`, but not having any luck. – mojave Apr 05 '21 at 15:49
2

Nice, this one helped me a lot

but, don't forget to put extra_css as external key

edit_uri: ""
url_start: "..."

# Copyright
copyright: "..."

extra_css: # <-------- HERE
- stylesheets/extra.css 

# Configuration
theme:
  name: material
  custom_dir: material
 ...
robert.batty
  • 490
  • 5
  • 13