Mines
Esc

    Guides

    Theming

    Change colors, fonts and spacing with CSS variables.

    The theme is driven by custom properties on :root. Override any of them in a stylesheet listed in customCss.

    src/styles/theme.css
    :root {
  --accent: #7c3aed;
  --accent-soft: #f5f3ff;
  --font-heading: 'Fraunces', serif;
}

:root[data-theme='dark'] {
  --accent: #a78bfa;
  --accent-soft: #a78bfa1a;
}

    Tokens

    --font-sans / --font-heading / --font-monofont-family

    Body text uses the system stack. Headings use Lora, loaded from the package.

    --text-xs … --text-lglength

    Type scale, from 12px to 17px.

    --bg / --bg-subtle / --bg-mutedcolor

    Page, panel and hover backgrounds.

    --fg / --fg-muted / --fg-subtlecolor

    Text, secondary text and hints.

    --accent / --accent-softcolor

    Active state, links and focus rings.

    --note / --tip / --warning / --cautioncolor

    Callout and badge tones, each with a -soft variant.

    --sidebar-width / --toc-width / --content-widthlength

    Layout columns.

    Dark mode

    The theme follows the system preference until the visitor picks one with the toggle. The choice is stored in localStorage and applied before first paint.