Theming

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

{
  "theme": "jam"
}

Available Themes

JamNebulaPulsarHaloDusk

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:

The defaults are tuned to each theme. Set fonts in docs.json to swap the whole 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 only family to have the build fetch it. Self-host a custom font by adding 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, for example with a delicate geometric font like Geist:

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

weight sets the body text weight only. Headings keep each theme's heavier weights. It works in the body form too: "body": { "family": "Geist", "weight": 200 }.

Use Custom CSS for anything beyond the fonts field: overriding code fonts, tweaking weights per heading level, or loading non-Google webfonts.

Custom Colors

Override the default palette with your brand colors:

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

Dark Mode

Every theme includes dark mode. By default Jamdesk follows the visitor's system preference and shows a toggle in the navbar. Your color palette adapts on its own.

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. Visitors can still switch. Add strict: true to remove the toggle and lock the site to that mode.

Test dark mode during development with 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"

Use Custom CSS for fine-grained control over dark mode styles.

What's Next?