Themes anpassen

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.

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

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

{
  "theme": "jam"
}

Typografie

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

Theme	Überschriften	Fließtext	Code
Jam	Inter	Inter	JetBrains Mono
Nebula	IBM Plex Mono	IBM Plex Mono	IBM Plex Mono
Pulsar	Inter	Inter	JetBrains Mono
Halo	Figtree	Figtree	JetBrains Mono
Dusk	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:

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

Verwende unterschiedliche Schriftarten für Überschriften und Fließtext:

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

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

{
  "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.

Benutzerdefinierte Farben

Überschreibe die Standardfarbpalette, damit sie zu deiner Markenidentität passt:

{
  "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 oder Realtime Colors, um eine harmonische Farbpalette zu erstellen.

Mehr als nur Farben anpassen? Mit Eigenes 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:

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

Öffne die DevTools
Drücke Cmd+Shift+P (Mac) oder Ctrl+Shift+P (Windows)
Suche nach "Emulate CSS prefers-color-scheme: dark"

Für detaillierte Anpassungen der Stile im Dunkelmodus verwende Eigenes CSS.

Wie geht es weiter?

Branding

Passe Logos, Farben und Favicons an

Custom CSS

Überschreibe Theme-Stile mit eigenem CSS

Navigation

Konfiguriere Tabs, Gruppen und Seitenstruktur