Theme-Einstellungen und Farbschemen

config/settings_schema.json

Das erste Element trägt Metadaten und die Einstellungen. Weitere Elemente bilden Gruppen im Einstellungsdialog.

[
  {
    "theme_name": "Mein Theme",
    "theme_version": "1.0.0",
    "theme_author": "Meine Agentur",
    "settings": [
      { "type": "text",        "id": "site_name",     "label": "Seitenname" },
      { "type": "image",       "id": "logo",          "label": "Logo" },
      { "type": "font_picker", "id": "font_body",     "label": "Schrift (Fließtext)", "default": "Inter" },
      { "type": "font_picker", "id": "font_heading",  "label": "Schrift (Überschriften)", "default": "Inter" },
      { "type": "number",      "id": "border_radius", "label": "Eckenradius (px)", "default": 8, "min": 0, "max": 40, "step": 1 }
    ]
  }
]

Die aktuellen Werte liegen in config/settings_data.json und stehen in allen Templates als settings bereit, z. B. {{ settings.site_name }}.

Farbschemen als Repeater

{
  "name": "Farbschemen",
  "repeater": {
    "id": "color_schemes",
    "min": 1,
    "max": 20,
    "default": [
      { "id": "default", "name": "Standard", "background": "#FFFFFF", "text": "#222222", "primary": "#000000", "primary_text": "#FFFFFF" },
      { "id": "dark",    "name": "Dunkel",   "background": "#000000", "text": "#FFFFFF", "primary": "#FFFFFF", "primary_text": "#000000" }
    ],
    "fields": [
      { "type": "text",  "id": "name",         "label": "Name" },
      { "type": "color", "id": "background",   "label": "Hintergrund" },
      { "type": "color", "id": "text",         "label": "Text" },
      { "type": "color", "id": "primary",      "label": "Primärfarbe" },
      { "type": "color", "id": "primary_text", "label": "Text auf Primärfarbe" }
    ]
  }
}

CSS-Klassen im Layout erzeugen

<style>
  {% for scheme in settings.color_schemes %}
  .color-scheme--{{ scheme.id | handleize }} {
    --color-background:   {{ scheme.background   | default: '#FFFFFF' | css_safe }};
    --color-text:         {{ scheme.text         | default: '#222222' | css_safe }};
    --color-primary:      {{ scheme.primary      | default: '#000000' | css_safe }};
    --color-primary-text: {{ scheme.primary_text | default: '#FFFFFF' | css_safe }};
  }
  {% endfor %}
</style>

In der Section verwenden

{ "type": "color_scheme", "id": "color_scheme", "label": "Farbschema", "default": "default" }

<section class="section color-scheme--{{ section.settings.color_scheme | default: 'default' }}">
  …
</section>

.section      { background: var(--color-background); color: var(--color-text); }
.section .btn { background: var(--color-primary); color: var(--color-primary-text); }

Es gibt keine separate settings.css: Im Live-Build kommt das CSS aus dem Layout, im Editor tauscht Mosaio es bei Änderungen ohne Reload aus. Theme-Einstellungen speichern löst einen vollständigen Neuaufbau aus.