Theme Manager konfigurierbar

Farben & Fonts im Admin

Der eigentliche Mehrwert eines Themes für den Betreiber: Farben, Schriften und Optionen selbst im Admin einstellen, ohne Code. Das leistet der config-Block der theme.json – die Brücke zum Theme Manager.

Aufbau des config-Blocks

Die Felder werden über tabs, blocks und sections gruppiert und im Theme Manager genau so angezeigt:

"config": {
  "fields": {
    "sw-color-brand-primary": {
      "type": "color",
      "value": "#04151f",
      "editable": true,
      "tab": "colors",
      "block": "themeColors",
      "section": "primary"
    }
  }
}

Vom Feld zur SCSS-Variable

Der Clou: Ein Feldname wie sw-color-brand-primary steht im kompilierten SCSS automatisch als $sw-color-brand-primary zur Verfügung. Ändert der Betreiber die Farbe im Theme Manager, fließt der neue Wert beim Kompilieren direkt ins Design – ganz ohne Code-Änderung.

Dieses automatische Einspeisen steuert die Eigenschaft scss (Standard: true). Mit scss: false bleibt ein Feld reine API-Daten und wird nicht als Variable injiziert.

Feldtypen

Typ	Wofür
`color`	Farbwähler
`text` / `number`	Text- und Zahlenwerte
`fontFamily`	Schriftauswahl
`media`	Bild/Datei (z. B. Logo)
`checkbox` / `switch`	An/Aus-Optionen
`url`	Verweise
`custom`	API-only, ohne Verarbeitung

Wichtige Feld-Eigenschaften

value – Standardwert
editable – im Theme Manager sichtbar/änderbar
tab / block / section – Gruppierung in der Oberfläche
scss – als SCSS-Variable einspeisen (Standard true)

Sinnvoll gruppieren

Ein durchdachtes Set aus wenigen, klar benannten Feldern („Primärfarbe", „Schrift", „Logo") ist mehr wert als hundert Optionen. Der Betreiber soll das Theme anpassen können, ohne es zu zerlegen.

Kurz: Felder im config-Block definieren, sinnvoll in Tabs/Blöcke/Sektionen gruppieren – und über die automatische SCSS-Variable landet jede Änderung direkt im Design.