Command Palette
Search for a command to run...

Theming

Drop a theme.css into your content root and open-docs loads it automatically — after its own stylesheet, so your rules always win. No fork, no rebuild of the image.

  • content/
    • index.md
    • guides/
      • install.md
    • theme.css — your overrides

In Docker the file rides along with your content mount; there is nothing extra to configure.

Two layers to override

The site is built on a set of CSS custom properties. Change a few and the whole UI — nav, buttons, prose, search — re-themes coherently, in both light and dark mode.

theme.css
:root {
  --primary: oklch(0.55 0.21 264);   /* brand accent */
  --radius: 0.5rem;                  /* corner rounding */
}
.dark {
  --primary: oklch(0.7 0.16 264);
}

Common tokens: --primary, --background, --foreground, --sidebar, --sidebar-accent, --muted, --border, --radius, and --font-sans. Colors use oklch() to match the stock theme, but any valid CSS color works.

The mobile browser chrome (the <meta name="theme-color"> tint) tracks --primary automatically, so it matches your accent in both modes — there is no separate colour to set.

Component classes

For structural tweaks the tokens do not reach, target classes directly — this file loads last, so it beats the defaults at equal specificity.

theme.css
.prose h1 { letter-spacing: -0.02em; }
.prose a  { text-decoration-thickness: 2px; }

Dark mode

Light/dark is driven by a .dark class toggled on <html> by the theme switch in the top bar. Put dark overrides under a .dark { … } selector, as above — there is nothing else to wire up.