---
title: Theming
description: Wählen Sie ein integriertes Theme (Jam, Nebula, Pulsar oder Halo) für Typografie, Layout, Abstände und Dunkelmodus. Farben an Ihre Marke anpassen.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Setzen Sie `theme` in `docs.json`, um Layout, Typografie, Abstände und das Verhalten des Dunkelmodus zu steuern. Vier Themes sind verfügbar: `jam` (Standard), `nebula`, `pulsar` und `halo`.

Die Screenshots zeigen die Benutzeroberfläche auf Englisch.

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

## Verfügbare Themes

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

    Das Standard-Theme. Layout mit Logo im Header und einem radialen Farbverlauf im Hintergrund, der aus Ihrer Primärfarbe abgeleitet wird. Abgerundete Rahmen (6–24 px).

    [Live-Beispiel ansehen](https://jamdesk.com/docs/introduction)

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

    Layout mit Logo im Header und durchgängiger Verwendung von IBM Plex Mono. Warmer cremefarbener Hintergrund (`#FEFCF9`) im hellen Modus. Minimal abgerundete Rahmen (2–8 px).

    [Live-Beispiel ansehen](https://nebula.jamdesk.com)

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

    Layout mit priorisierter Seitenleiste, Logo in der Seitenleiste und Navigationsindikatoren am linken Rand. Vollbreit mit zentriertem Inhalt von 780 px. Der Header ist standardmäßig ausgeblendet.

    [Live-Beispiel ansehen](https://pulsar.jamdesk.com)

    ```json
    {
      "theme": "pulsar"
    }
    ```
  </Tab>
  <Tab title="Halo" icon="sun">
    <Frame>
      <img src="/images/themes/halo-theme.webp" alt="Vorschau des Halo-Themes" />
    </Frame>

    Layout mit Logo im Header und durchgängiger Verwendung von Figtree. Warmer sandfarbener Hintergrund (`#F7F2E8`) mit auf einer Karte angezeigtem Inhalt. Stark abgerundete Rahmen (8–28 px).

    [Live-Beispiel ansehen](https://halo.jamdesk.com)

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

## Typografie

Jedes Theme enthält Schriftarten, die von Google Fonts geladen werden:

| Theme | Überschriften | Fließtext | 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 |
| [Halo](https://halo.jamdesk.com) | Figtree | Figtree | JetBrains Mono |

Wir empfehlen die Standardwerte; sie sind auf jedes Theme abgestimmt. Wenn Sie ein anderes Erscheinungsbild benötigen, setzen Sie `fonts` in `docs.json`, um die gesamte Website auf eine Google-Schriftart umzustellen:

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

Verwenden Sie separate Schriftarten für Überschriften und Fließtext:

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

Jede Google-Schriftart funktioniert. Setzen Sie nur `family`, und der Build lädt sie automatisch. Um eine benutzerdefinierte Schriftart selbst zu hosten, fügen Sie `source` (URL oder relativen Pfad zu `/`) und `format` hinzu:

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

Setzen Sie `weight` für einen leichteren (oder schwereren) Fließtext. Das ist praktisch für filigrane geometrische Schriftarten wie Geist:

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

`weight` legt ausschließlich die Stärke des **Fließtexts** fest; Überschriften behalten die höheren Gewichtungen ihres jeweiligen Themes, sodass die typografische Hierarchie erhalten bleibt. Es funktioniert auch in der `body`-Form: `"body": { "family": "Geist", "weight": 200 }`.

Für alles, was über das Feld `fonts` hinausgeht (Überschreiben von Code-Schriftarten, Anpassen der Gewichtungen einzelner Überschriftenebenen oder Laden von Webfonts, die nicht von Google stammen), siehe [Benutzerdefiniertes CSS](/de/customization/custom-css#externe-schriftarten).

## Benutzerdefinierte Farben

Überschreiben Sie die Standardpalette, um sie an Ihre Markenidentität anzupassen:

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

| Farbe | Verwendung |
|-------|------------|
| `primary` | Links, Schaltflächen, Akzente |
| `light` | Hover-Zustände, Hervorhebungen |
| `dark` | Aktive Zustände, Akzente im Dunkelmodus |

<Note>
Farben werden nach Ihrem nächsten Build wirksam. Starten Sie in der lokalen Entwicklung den Dev-Server neu, um die Änderungen zu sehen.
</Note>

<Tip>
Verwenden Sie ein Farbtool wie [Coolors](https://coolors.co) oder [Realtime Colors](https://realtimecolors.com), um eine harmonische Palette zu erstellen.
</Tip>

<Tip>
**Mehr als Farben erforderlich?** Mit [Benutzerdefiniertem CSS](/de/customization/custom-css) können Sie Schriftarten, Abstände, Inhaltsbreite, Rahmenradien, Callout-Stile und Details auf Komponentenebene überschreiben. Themes legen die Standardwerte fest; Benutzerdefiniertes CSS ist die Ausweichlösung für alles, was sich mit CSS anpassen lässt.
</Tip>

## Dunkelmodus

Alle Themes enthalten einen Dunkelmodus. Standardmäßig folgt Jamdesk der Systemeinstellung des Benutzers und bietet einen Umschalter in der Navigationsleiste. Ihre Farbpalette wird automatisch angepasst.

Fixieren Sie die Website mit `appearance` in `docs.json` auf einen bestimmten Modus:

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

| Feld | Werte | Standard | Beschreibung |
|------|-------|----------|--------------|
| `default` | `"system"` \| `"light"` \| `"dark"` | `"system"` | Initialer Modus für Besucher beim ersten Aufruf |
| `strict` | boolean | `false` | Wenn `true`, wird der Umschalter in der Navigationsleiste ausgeblendet, sodass Besucher im Modus `default` bleiben |

Setzen Sie nur `default`, um einen Startmodus vorzuschlagen und Benutzern weiterhin den Wechsel zu ermöglichen. Fügen Sie `strict: true` hinzu, um den Umschalter vollständig zu entfernen und die Website auf diesen Modus festzulegen.

Um den Dunkelmodus während der Entwicklung zu testen, verwenden Sie den Umschalter in der Navigationsleiste oder simulieren Sie ihn in den DevTools:

1. Öffnen Sie die DevTools
2. Drücken Sie Cmd+Shift+P (Mac) oder Ctrl+Shift+P (Windows)
3. Suchen Sie nach "Emulate CSS prefers-color-scheme: dark"

Für eine detaillierte Steuerung der Stile des Dunkelmodus verwenden Sie [Benutzerdefiniertes CSS](/de/customization/custom-css).

## Wie geht es weiter?

<Columns cols={3}>
  <Card title="Branding" icon="palette" href="/de/customization/branding">
    Passen Sie Logos, Farben und Favicons an
  </Card>
  <Card title="Benutzerdefiniertes CSS" icon="paintbrush" href="/de/customization/custom-css">
    Überschreiben Sie Theme-Stile mit Ihrem eigenen CSS
  </Card>
  <Card title="Navigation" icon="bars" href="/de/navigation/overview">
    Konfigurieren Sie Tabs, Gruppen und die Seitenstruktur
  </Card>
</Columns>