Skip to content

Change appearance

Theme and colors

You can customize how your documentation website looks, including fonts, colors and even complete themes.

MkDocs themes

MkDocs has many themes. The default boilerplate theme is Material for MkDocs.

Let's change colors in the file mkdocs.yml.

mkdocs.yml

# ===========================================================
# APPEARANCE
# ===========================================================

theme:
  name: 'material'
  favicon: 'assets/favicon.ico'
  logo: 'assets/Alnoda-logo.svg'
  custom_dir: overrides
  font:
    text: Lexend
  icon:
    repo: fontawesome/brands/github
  features:
    - search.suggest
  palette:
    - scheme: default
      toggle:
        icon: material/weather-sunny
        name: Switch to light mode
      primary: deep purple  
      accent: deep orange
    - scheme: slate
      toggle:
        icon: material/weather-night
        name: Switch to dark mode
      primary: deep purple
      accent: lime

Both primary and accent colors can be selected from this palette:

(Click on any of these buttons to try primary color out!)

Material MkDocs

Material fo Mkdocs is beautiful and very customizable. Check its documentation

Change the name of the documentation website, and link it to your Git repository

mkdocs.yml

# ===========================================================
# CONFIGURATION
# ===========================================================

site_name: MkDocs MagicSpace
repo_url: https://github.com/Alnoda/workspaces-in-docker/tree/main/workspaces/base-workspace
site_url: https://alnoda.org
edit_uri: ""