---
title: Themes anpassen
description: Wähle ein integriertes Theme (Jam, Nebula, Pulsar, Halo oder Dusk) für Typografie, Layout, Abstände und Dark Mode. Passe Farben an deine Marke an.
---
> **For AI agents:** the complete documentation index is at [llms.txt](https://jamdesk.com/docs/llms.txt). Append `.md` to any page URL for its markdown version.
Lege `theme` in `docs.json` fest, um Layout, Typografie, Abstände und das Verhalten des Dunkelmodus zu steuern. Es gibt fünf Themes: `jam` (Standard), `nebula`, `pulsar`, `halo` und `dusk`.
Die Screenshots zeigen die Benutzeroberfläche auf Englisch.
```json docs.json
{
"theme": "jam"
}
```
Probiere jedes Theme in dieser Dokumentation aus, bevor du dich entscheidest. Wähle oben in der Seitenleiste unter **Preview a theme** ein Theme aus. Auf Mobilgeräten öffnest du dazu das Navigationsmenü. Die Vorschau bleibt aktiv, bis du den Browser schließt.
## Verfügbare Themes
### Jam
Das Standard-Theme. Layout mit Logo im Header und radialem Farbverlauf im Hintergrund, abgeleitet von deiner Primärfarbe. Abgerundete Ränder (6–24 px).
[Live-Beispiel ansehen](https://jamdesk.com/docs/introduction)
```json
{
"theme": "jam"
}
```
### Nebula
Layout mit Logo im Header und durchgängig IBM Plex Mono. Warmer cremefarbener Hintergrund (`#FEFCF9`) im hellen Modus. Minimale Abrundung der Ecken (2–8 px).
[Live-Beispiel ansehen](https://nebula.jamdesk.com)
```json
{
"theme": "nebula"
}
```
### Pulsar
Layout mit Seitenleiste im Vordergrund, Logo in der Seitenleiste und Navigationsmarkierungen am linken Rand. Volle Breite mit zentriertem Inhalt von 780 px. Header standardmäßig ausgeblendet.
[Live-Beispiel ansehen](https://pulsar.jamdesk.com)
```json
{
"theme": "pulsar"
}
```
### Halo
Layout mit Logo im Header und durchgängig Figtree. Warmer sandfarbener Hintergrund (`#F7F2E8`), auf dem der Inhalt wie auf einer Karte liegt. Stark abgerundete Ecken (8–28 px).
[Live-Beispiel ansehen](https://halo.jamdesk.com)
```json
{
"theme": "halo"
}
```
### Dusk
Layout mit Logo in der Kopfzeile, mit Inter als Fließtext und IBM Plex Serif als Überschrift. Flaches, einheitliches Design ohne erhöhte Karten – nur 1px-Rahmen als Trennlinien. Tintenblauer Akzent. Zurückhaltend abgerundet (4–16px).
[Live-Beispiel anzeigen](https://dusk.jamdesk.com)
```json
{
"theme": "dusk"
}
```
## Typografie
Jedes Theme enthält Schriftarten, die über 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 |
| [Dusk](https://dusk.jamdesk.com) | IBM Plex Serif | Inter | JetBrains Mono |
Wir empfehlen die Standardeinstellungen, da sie auf jedes Theme abgestimmt sind. Wenn du ein anderes Erscheinungsbild möchtest, kannst du mit `fonts` in `docs.json` die Schriftart der gesamten Website durch eine Google Font ersetzen:
```json
{
"fonts": {
"family": "Lora"
}
}
```
Verwende unterschiedliche Schriftarten für Überschriften und Fließtext:
```json
{
"fonts": {
"heading": { "family": "Space Grotesk" },
"body": { "family": "Inter" }
}
}
```
Jede Google Font ist geeignet. Lege nur `family` fest, und der Build lädt die Schriftart automatisch. Um eine benutzerdefinierte Schriftart selbst zu hosten, füge `source` (URL oder relativer Pfad zu `/`) und `format` hinzu:
```json
{
"fonts": {
"family": "AcmeSans",
"source": "/fonts/acme-sans.woff2",
"format": "woff2"
}
}
```
Lege `weight` fest, um eine leichtere oder stärkere Schrift im Fließtext zu verwenden. Das ist praktisch für filigrane geometrische Schriftarten wie Geist:
```json
{
"fonts": {
"family": "Geist",
"weight": 200
}
}
```
`weight` legt nur die Schriftstärke des **Fließtexts** fest. Überschriften behalten die stärkeren Schriftstärken des jeweiligen Themes bei, sodass die typografische Hierarchie erhalten bleibt. Die Einstellung funktioniert auch mit der `body`-Variante: `"body": { "family": "Geist", "weight": 200 }`.
Weitere Anpassungen über das Feld `fonts` hinaus (etwa Code-Schriftarten überschreiben, Schriftstärken pro Überschriftenebene anpassen oder Webfonts verwenden, die nicht von Google stammen) findest du unter [Eigenes CSS](https://jamdesk.com/docs/de/customization/custom-css#externe-schriftarten).
## Benutzerdefinierte Farben
Überschreibe die Standardfarbpalette, damit sie zu deiner Markenidentität passt:
```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 |
Die Farben werden nach deinem nächsten Build wirksam. Starte in der lokalen Entwicklung den Entwicklungsserver neu, um die Änderungen zu sehen.
Nutze ein Farbwerkzeug wie [Coolors](https://coolors.co) oder [Realtime Colors](https://realtimecolors.com), um eine harmonische Farbpalette zu erstellen.
**Mehr als nur Farben anpassen?** Mit [Eigenes CSS](https://jamdesk.com/docs/de/customization/custom-css) kannst du Seitenfarben, Abstände, Eckenradien, Callout-Stile und Details einzelner Komponenten überschreiben. Themes legen die Standardeinstellungen fest; mit eigenem CSS kannst du alles anpassen, was sich über CSS beeinflussen lässt.
## Dunkelmodus
Alle Themes enthalten einen Dunkelmodus. Standardmäßig richtet sich Jamdesk nach den Systemeinstellungen der Nutzer und bietet in der Navigationsleiste einen Umschalter. Deine Farbpalette passt sich automatisch an.
Lege mit `appearance` in `docs.json` einen bestimmten Modus für die Website fest:
```json
{
"appearance": {
"default": "dark",
"strict": true
}
}
```
| Feld | Werte | Standard | Beschreibung |
|-------------|---------|---------|-------------|
| `default` | `"system"` \| `"light"` \| `"dark"` | `"system"` | Anfangsmodus für neue Besucher |
| `strict` | boolean | `false` | Bei `true` wird der Umschalter in der Navigationsleiste ausgeblendet, sodass Besucher im Modus `default` bleiben |
Lege nur `default` fest, um einen Startmodus vorzuschlagen und Nutzern weiterhin den Wechsel zu ermöglichen. Füge `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, nutze den Umschalter in der Navigationsleiste oder simuliere ihn in den DevTools:
1. Öffne die DevTools
2. Drücke Cmd+Shift+P (Mac) oder Ctrl+Shift+P (Windows)
3. Suche nach "Emulate CSS prefers-color-scheme: dark"
Für detaillierte Anpassungen der Stile im Dunkelmodus verwende [Eigenes CSS](https://jamdesk.com/docs/de/customization/custom-css).
## Wie geht es weiter?
Passe Logos, Farben und Favicons an
Überschreibe Theme-Stile mit eigenem CSS
Konfiguriere Tabs, Gruppen und Seitenstruktur
```