Theme-Konfiguration

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

Die Screenshots zeigen die Benutzeroberfläche auf Englisch.

{
  "theme": "jam"
}

Verfügbare Themes

JamNebulaPulsarHalo

Das Standard-Theme. Layout mit Logo in der Kopfzeile und radialem Verlaufs-Hintergrund, der aus Ihrer Primärfarbe abgeleitet wird. Abgerundete Rahmen (6–24px).

Live-Beispiel anzeigen

{
  "theme": "jam"
}

Typografie

Jedes Theme bündelt Schriftarten, die aus Google Fonts geladen werden:

Wir empfehlen die Standardeinstellungen; 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:

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

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

{
  "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 eigene Schriftart zu hosten, fügen Sie source (URL oder relativen Pfad zu /) und format hinzu:

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

Setzen Sie weight für einen leichteren (oder kräftigeren) Fließtext. Das ist bei filigranen geometrischen Schriftarten wie Geist hilfreich:

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

weight legt ausschließlich die Schriftstärke des Fließtexts fest; Überschriften behalten die kräftigeren Gewichtungen des jeweiligen Themes, sodass Ihre 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 außerhalb von Google), siehe Eigenes CSS.

Benutzerdefinierte Farben

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

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

Dunkelmodus

Alle Themes enthalten einen Dark Mode. 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:

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

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

So testen Sie den Dark Mode während der Entwicklung mit dem Umschalter in der Navigationsleiste oder simulieren 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 Dark-Mode-Stile verwenden Sie Eigenes CSS.

Wie geht es weiter?