Skip to content

Restyling the docs (FE)

You own the look; you never touch mkdocs.yml, Python, or content. Two files:

  • docs/stylesheets/prism.css — map Prism tokens onto Material's CSS variables.
  • docs/assets/logo.svg, docs/assets/favicon.png — the marks.

Live preview (no backend needed)

pip install superb-ai mkdocs-material 'mkdocstrings[python]' mike
cd sdk && mkdocs serve      # http://127.0.0.1:8000, live-reloads on save

Edit prism.css, watch it re-render. Hand off the finished file + assets.

The Material CSS variables you'll want

variable controls
--md-primary-fg-color header bar, nav accents
--md-primary-fg-color--light / --dark header gradient ends
--md-accent-fg-color links, focus, active states
--md-default-bg-color / --md-default-fg-color page background / text
--md-code-bg-color / --md-code-fg-color code blocks
--md-text-font / --md-code-font body / mono typefaces

Set light values under :root, dark overrides under [data-md-color-scheme="slate"]. Full list: https://squidfunk.github.io/mkdocs-material/customization/. For header/footer structure, add HTML partials under overrides/ (also just HTML/CSS).