Theming

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.

{
  "theme": "jam"
}

Verfügbare Themes

JamNebulaPulsarHalo

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

{
  "theme": "jam"
}

Typografie

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

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:

{
  "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 benutzerdefinierte Schriftart selbst 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 schwereren) Fließtext. Das ist praktisch für filigrane geometrische Schriftarten wie Geist:

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

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

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

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.

Wie geht es weiter?