Material Design theme for MkDocs with built-in plugins for blogs, search, social cards, and privacy compliance
—
Complete customization of the Material Design theme including visual appearance, navigation behavior, typography, and user interface features. The theme system provides extensive configuration options through the mkdocs.yml file.
Core theme configuration that activates Material Design styling and sets fundamental appearance options.
theme:
name: material # Required: Activates Material theme
language: en # Optional: UI language (default: en)
direction: ltr # Optional: Text direction (ltr/rtl, default: ltr)
custom_dir: overrides # Optional: Custom template directoryComprehensive color theming with support for light/dark mode switching and accent colors.
theme:
palette:
# Single palette
- scheme: default # Color scheme (default/slate)
primary: indigo # Primary color
accent: indigo # Accent color
# Multi-palette with toggle
- scheme: default
primary: indigo
accent: indigo
toggle:
icon: material/brightness-7
name: Switch to dark mode
- scheme: slate
primary: indigo
accent: indigo
toggle:
icon: material/brightness-4
name: Switch to light modeAvailable Colors: red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown, grey, blue grey, black, white
Font configuration for text and code elements with support for Google Fonts integration.
theme:
font:
text: Roboto # Text font family
code: Roboto Mono # Code font familyPopular Font Options:
Advanced navigation functionality including tabs, sections, expansion, and search integration.
theme:
features:
# Navigation
- navigation.tabs # Enable top-level tabs
- navigation.tabs.sticky # Sticky navigation tabs
- navigation.sections # Enable navigation sections
- navigation.expand # Expand navigation by default
- navigation.prune # Prune navigation for large sites
- navigation.indexes # Enable section index pages
- navigation.top # Back-to-top button
- navigation.footer # Footer navigation
- navigation.tracking # Anchor tracking in URL
# Table of contents
- toc.follow # Follow table of contents
- toc.integrate # Integrate TOC in navigation
# Search
- search.highlight # Highlight search terms
- search.share # Search sharing button
- search.suggest # Search suggestions
# Header
- header.autohide # Auto-hide header on scroll
# Content
- content.tabs.link # Link content tabs
- content.tooltips # Enable tooltips
- content.footnote.tooltips # Footnote tooltips
- content.code.copy # Code copy button
- content.code.select # Code selection
- content.code.annotate # Code annotationsIcon system configuration including logo, favicon, and icon font selection.
theme:
icon:
logo: material/library # Logo icon
repo: fontawesome/brands/git-alt # Repository icon
edit: material/pencil # Edit icon
view: material/eye # View icon
admonition:
note: octicons/tag-16
abstract: octicons/checklist-16
info: octicons/info-16
tip: octicons/squirrel-16
success: octicons/check-16
question: octicons/question-16
warning: octicons/alert-16
failure: octicons/x-circle-16
danger: octicons/zap-16
bug: octicons/bug-16
example: octicons/beaker-16
quote: octicons/quote-16Brand identity configuration for logos and favicons.
theme:
logo: assets/logo.png # Logo image path
favicon: assets/favicon.png # Favicon paththeme:
name: material
language: en
direction: ltr
features:
- navigation.tabs
- navigation.sections
- navigation.expand
- navigation.top
- search.highlight
- search.share
- content.code.copy
palette:
- scheme: default
primary: indigo
accent: indigo
toggle:
icon: material/brightness-7
name: Switch to dark mode
- scheme: slate
primary: indigo
accent: indigo
toggle:
icon: material/brightness-4
name: Switch to light mode
font:
text: Roboto
code: Roboto Mono
icon:
logo: material/library
repo: fontawesome/brands/github
favicon: assets/favicon.pngtheme:
name: material
palette:
scheme: default
primary: bluetheme:
name: material
custom_dir: overrides
language: en
features:
- navigation.tabs
- navigation.tabs.sticky
- navigation.sections
- navigation.expand
- navigation.top
- search.highlight
- search.share
- content.code.copy
- content.tabs.link
palette:
scheme: default
primary: custom
accent: custom
font:
text: Source Sans Pro
code: JetBrains Mono
logo: assets/corporate-logo.svg
favicon: assets/corporate-favicon.icoInstall with Tessl CLI
npx tessl i tessl/pypi-mkdocs-material