Theming

Set theme in docs.json to control layout, typography, spacing, and dark mode behavior. Three themes are available: jam (default), nebula, and pulsar.

{
  "theme": "jam"
}

Available Themes

JamNebulaPulsar

The default theme. Header-logo layout with a radial gradient background derived from your primary color. Rounded borders (6-24px).

View live example

{
  "theme": "jam"
}

Typography

Each theme bundles fonts loaded from Google Fonts:

We recommend the defaults; they're tuned to each theme. If you need a different look, set fonts in docs.json to swap the entire site to a Google Font:

{
  "fonts": {
    "family": "Lora"
  }
}

Use separate fonts for headings and body:

{
  "fonts": {
    "heading": { "family": "Space Grotesk" },
    "body": { "family": "Inter" }
  }
}

Any Google Font works. Set just family and the build fetches it automatically. To self-host a custom font, add source (URL or /-relative path) and format:

{
  "fonts": {
    "family": "AcmeSans",
    "source": "/fonts/acme-sans.woff2",
    "format": "woff2"
  }
}

Set weight for a lighter (or heavier) body. This is handy for delicate geometric fonts like Geist:

{
  "fonts": {
    "family": "Geist",
    "weight": 200
  }
}

weight sets the body text weight only; headings keep each theme's heavier weights, so your type hierarchy stays intact. It works in the body form too: "body": { "family": "Geist", "weight": 200 }.

For anything beyond the fonts field (overriding code fonts, tweaking weights per heading level, or loading non-Google webfonts), see Custom CSS.

Custom Colors

Override the default palette to match your brand identity:

{
  "theme": "jam",
  "colors": {
    "primary": "#635BFF",
    "light": "#7C75FF",
    "dark": "#4F46E5"
  }
}

Dark Mode

All themes include dark mode. By default Jamdesk follows the user's system preference and offers a toggle in the navbar. Your color palette adapts automatically.

Pin the site to a specific mode with appearance in docs.json:

{
  "appearance": {
    "default": "dark",
    "strict": true
  }
}

Set default alone to suggest a starting mode while still letting users switch. Add strict: true to remove the toggle entirely and lock the site to that mode.

To test dark mode during development, use the navbar toggle or emulate it in DevTools:

1. Open DevTools
2. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows)
3. Search for "Emulate CSS prefers-color-scheme: dark"

For fine-grained control over dark mode styles, use Custom CSS.

What's Next?