Theme: Farben, Schriften und Abstände
Mit dem Theme-Builder Farben, Schrift, Abstände und Rundungen Ihrer Website zentral festlegen, eigene Token-Gruppen anlegen und prüfen, welche Bausteine welche Werte brauchen.
Worum es geht
Das Theme enthält die Gestaltungswerte Ihrer Website: Hauptfarbe, Hintergrund, Schrift, Grundabstand, Rundung von Ecken, Schatten. Diese Werte heissen Design-Tokens. Ändern Sie eine Farbe im Theme, übernimmt Ihre Website sie überall dort, wo sie das Token verwendet – ohne dass jemand den Code anfassen muss.
Voraussetzungen
- Recht Theme verwalten.
- Themes gehören zur aktiven Umgebung.
- Ihre Website muss die Tokens verwenden. Die Vorlagen von Scorebase tun das; bei einer eigenen Website fragen Sie Ihren Entwickler.
Ein Theme anlegen und als Standard setzen
- Öffnen Sie Theme. Die Seite heisst Theme-Builder.
- Klicken Sie auf Neues Theme, geben Sie einen Name ein (z.B. „Marke Hell“) und klicken Sie auf Erstellen. Das Theme startet mit Standardwerten.
- Passen Sie die Werte an (siehe unten) und klicken Sie auf Speichern.
- Klicken Sie auf Als Standard. Ihre Website verwendet immer das Standard-Theme der Umgebung; es ist mit Standard markiert.
Löschen entfernt ein Theme dauerhaft; das lässt sich nicht rückgängig machen.
Werte ändern: der Reiter „Tokens“
Die Tokens sind in Gruppen geordnet. Fünf Kern-Gruppen gibt es immer:
| Gruppe | Enthält (Beispiele) |
|---|---|
colors |
Primär-, Sekundär-, Hintergrund-, Text- und Akzentfarbe, Rahmen, dazu Farben für Erfolg, Warnung und Gefahr |
typography |
Schriftart, Grundgrösse der Schrift, Skalierung der Überschriften |
spacing |
Grundabstand |
radius |
Rundung der Ecken |
effects |
Schatten |
Kern-Gruppen und Kern-Tokens lassen sich nicht löschen oder umbenennen; ihre Werte ändern Sie jederzeit. Die Live-Vorschau zeigt an einer Beispiel-Karte, wie die Werte wirken.
Eigene Gruppen und Tokens
- Gruppe hinzufügen: Key (z.B.
buttons) und optional eine Bezeichnung. - Token hinzufügen: Key (z.B.
gap), Typ (Farbe, Grösse, Zahl, Text, Schatten oder Schriftart) und optional eine Bezeichnung.
Jedes Token wird auf der Website zu einer CSS-Variable im Muster --<gruppe>-<token>, z.B. --colors-primary. Unter CSS-Variablen sehen Sie alle Namen; Variablen-Namen kopieren übernimmt sie in die Zwischenablage.
Wichtig: Löschen Sie ein Token oder eine Gruppe, entfällt die zugehörige CSS-Variable. Eine Website, die sie verwendet, muss angepasst werden. Stimmen Sie das vorher mit Ihrem Entwickler ab.
Reiter „Bibliothek“ und „Token-Inventar“
- Bibliothek zeigt die Bausteine der Scorebase-Bausteinbibliothek mit Vorschau. Je Baustein steht, wie viele Tokens er nutzt und wie viele davon in Ihrem Theme gesetzt sind. „Interaktiv“ kennzeichnet Bausteine mit eigener Bedienung.
- Token-Inventar zeigt, welche Bausteine welche Tokens nutzen, und markiert fehlende Tokens mit „fehlt“. Mit Token anlegen ergänzen Sie ein fehlendes Token direkt. Darunter stehen Tokens, die kein Baustein der Bibliothek nutzt – sie können trotzdem von Ihrer eigenen Website verwendet werden.
Im Marketplace veröffentlichen
Mit Im Marketplace veröffentlichen stellen Sie ein Theme anderen Organisationen zur Verfügung. Dafür brauchen Sie das Recht Bausteine im Marketplace veröffentlichen, und der Marketplace muss in Ihrer Organisation freigeschaltet sein. Details: Marketplace.
Für Entwickler
Die Content API liefert die Tokens des Standard-Themes unter GET /theme als { gruppe: { token: wert } }. Verwenden Sie sie als CSS-Variablen mit Ersatzwert, z.B. var(--colors-primary, #2563eb). Themes lassen sich auch als Datei pflegen (hcms theme pull, push, diff), siehe Website als Code. Welche Tokens die Bausteine eines Projekts brauchen, prüft hcms tokens check, siehe Bausteinbibliothek.
Wenn etwas nicht klappt
| Symptom | Ursache | Lösung |
|---|---|---|
| Die Website übernimmt eine Farbe nicht | Das Theme ist nicht Standard, liegt in einer anderen Umgebung, oder die Website speichert das Theme zwischen | Standard setzen, Umgebung prüfen; Webhook für theme.updated einrichten lassen |
| „Ungültiger Key“ | Keys beginnen mit einem Kleinbuchstaben und enthalten nur Kleinbuchstaben, Ziffern und Bindestriche | Key anpassen |
| „Key bereits vergeben“ | Das Token oder die Gruppe gibt es schon | Anderen Key wählen |
| Ein Baustein sieht falsch aus | Ihm fehlt ein Token | Im Token-Inventar fehlende Tokens anlegen |