Skip to content

Customizing the mkdocs theme

Mkdocs configuration is done using the mkdocs.yml YAML file. Here you can modify the title and theme of your site.

Important to keep the indentation consistent in pairs of two's and only using spaces.

Setting your site title

You can personalize the site by changing your name in the site_name, site_description, copyright lines. Also update your social network links in the extra section.

# Replace the text below to customize your site
site_name: Your name
site_description: Your name Fabricademy site
site_author: Your name
copyright: Copyright 2021 Your name - Creactive Commons Attribution Non-commercial

extra:
  social:
    - icon: fontawesome/brands/instagram
      link: https://instagram.com/fabricademy
    - icon: fontawesome/brands/facebook
      link: https://facebook.com/fabricademy
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/fabricademy

For other social icons on the Material Docs

How to change the theme colors

The can change the primary and accent sections. Changing these will update the theme colors in your generated website. See the available colors here

theme:
  name: material
  palette:
    primary: deep purple
    accent: deep purple

How to change the theme fonts

You can change the font of your whole site using Google Fonts.

theme:
  name: material
  font:
    text: Roboto
    code: Roboto Mono

Using CSS

If you want to tweak some colors or change the spacing of certain elements, you can do this in a separate stylesheet. The easiest way is by creating a new stylesheet file in the docs directory:

.
├─ docs/
│  └─ stylesheets/
│     └─ extra.css
└─ mkdocs.yml

Then, add the following line to mkdocs.yml:

extra_css:
  - stylesheets/extra.css

Further customization

The default theme is based on mkdocs-material

Check the mkdocs-material docs for further customization options.

You can also use other mkdocs themes, for example mkdocs-bootstrap.

Last update: October 1, 2020