---
title: Theming
description: Choose a built-in theme — Jam, Nebula, or Pulsar — to control typography, layout, spacing, and dark mode. Override colors to match your brand.
---

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

```json docs.json
{
  "theme": "jam"
}
```

## Available Themes

<Tabs>
  <Tab title="Jam" icon="jar">
    <Frame>
      <img src="/images/themes/jam-theme.webp" alt="Jam theme preview" />
    </Frame>

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

    [View live example](https://jamdesk.com/docs/introduction)

    ```json
    {
      "theme": "jam"
    }
    ```
  </Tab>
  <Tab title="Nebula" icon="cloud">
    <Frame>
      <img src="/images/themes/nebula-theme.webp" alt="Nebula theme preview" />
    </Frame>

    Header-logo layout with IBM Plex Mono throughout. Warm cream background (`#FEFCF9`) in light mode. Minimal border radius (2-8px).

    [View live example](https://nebula.jamdesk.com)

    ```json
    {
      "theme": "nebula"
    }
    ```
  </Tab>
  <Tab title="Pulsar" icon="bolt">
    <Frame>
      <img src="/images/themes/pulsar-theme.webp" alt="Pulsar theme preview" />
    </Frame>

    Sidebar-first layout with the logo in the sidebar and left-border nav indicators. Full-width with 780px centered content. Header hidden by default.

    [View live example](https://pulsar.jamdesk.com)

    ```json
    {
      "theme": "pulsar"
    }
    ```
  </Tab>
</Tabs>

## Typography

Each theme bundles fonts loaded from Google Fonts:

| Theme | Headings | Body | Code |
|-------|----------|------|------|
| [Jam](https://jamdesk.com/docs/introduction) | Inter | Inter | JetBrains Mono |
| [Nebula](https://nebula.jamdesk.com) | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| [Pulsar](https://pulsar.jamdesk.com) | Inter | Inter | JetBrains Mono |

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:

```json
{
  "fonts": {
    "family": "Lora"
  }
}
```

Use separate fonts for headings and body:

```json
{
  "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`:

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

For anything beyond the `fonts` field — overriding code fonts, tweaking weights per heading level, or loading non-Google webfonts — see [Custom CSS](/customization/custom-css#external-fonts).

## Custom Colors

Override the default palette to match your brand identity:

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

| Color | Usage |
|-------|-------|
| `primary` | Links, buttons, accents |
| `light` | Hover states, highlights |
| `dark` | Active states, dark mode accents |

<Note>
Colors take effect after your next build. In local development, restart the dev server to see changes.
</Note>

<Tip>
Use a color tool like [Coolors](https://coolors.co) or [Realtime Colors](https://realtimecolors.com) to generate a harmonious palette.
</Tip>

<Tip>
**Need more than colors?** [Custom CSS](/customization/custom-css) lets you override fonts, spacing, content width, border radii, callout styles, and component-level details. Themes set the defaults; Custom CSS is the escape hatch for anything CSS can touch.
</Tip>

## 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`:

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

| Field | Values | Default | Description |
|-------|--------|---------|-------------|
| `default` | `"system"` \| `"light"` \| `"dark"` | `"system"` | Initial mode for first-time visitors |
| `strict` | boolean | `false` | When `true`, hides the navbar toggle so visitors stay on `default` |

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](/customization/custom-css).

## What's Next?

<Columns cols={3}>
  <Card title="Branding" icon="palette" href="/customization/branding">
    Customize logos, colors, and favicons
  </Card>
  <Card title="Custom CSS" icon="paintbrush" href="/customization/custom-css">
    Override theme styles with your own CSS
  </Card>
  <Card title="Navigation" icon="bars" href="/navigation/overview">
    Configure tabs, groups, and page structure
  </Card>
</Columns>