CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-mkdocs-material

Material Design theme for MkDocs with built-in plugins for blogs, search, social cards, and privacy compliance

Pending
Overview
Eval results
Files

theme-configuration.mddocs/

Theme Configuration

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.

Capabilities

Basic Theme Setup

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 directory

Color Palette Configuration

Comprehensive 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 mode

Available 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

Typography Configuration

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 family

Popular Font Options:

  • Text: Roboto, Open Sans, Ubuntu, Source Sans Pro, Noto Sans
  • Code: Roboto Mono, JetBrains Mono, Fira Code, Source Code Pro

Navigation Features

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 annotations

Icon Configuration

Icon 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-16

Logo and Favicon

Brand identity configuration for logos and favicons.

theme:
  logo: assets/logo.png         # Logo image path
  favicon: assets/favicon.png   # Favicon path

Usage Examples

Complete Theme Configuration

theme:
  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.png

Minimal Theme Configuration

theme:
  name: material
  palette:
    scheme: default
    primary: blue

Advanced Corporate Theme

theme:
  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.ico

Install with Tessl CLI

npx tessl i tessl/pypi-mkdocs-material

docs

additional-plugins.md

blog-plugin.md

index.md

privacy-plugin.md

search-plugin.md

social-plugin.md

tags-plugin.md

theme-configuration.md

tile.json