Entwicklung

Variablen

Welche CSS- und SCSS-Variablen das Theme erzeugt, wie du eigene anlegst und wo sie wirken.

bloqy legt alle Werte des Themes als Variablen ab: als CSS Custom Property (--color-primary) auf :root und, soweit sie aus Theme → Farben, Design-System oder Variablen stammen, zusätzlich als SCSS-Variable ($color-primary). Die meisten erzeugt bloqy aus den Theme-Seiten; eigene legst du unter Gestaltung → Theme → Variablen an. Wie Designs und Stile sie verwenden, zeigt Blöcke, Designs, Stile und Variablen – technisch.

Die wichtigsten Gruppen

Gruppe	Beispiele	Gepflegt unter
Grundfarben	`--color-primary`, `--color-secondary`, `--color-accent`, `--color-light`, `--color-dark`, `--color-text`, `--color-background`, `--color-surface`, `--color-overlay`, `--color-border`, `--color-success`, `--color-warning`, `--color-error`	Theme → Farben
Eigene Farben	`--color-brand` (Präfix `color-` ergänzt bloqy)	Theme → Farben
Abstufungen	`--color-primary-100` … `--color-primary-900`; 100–400 heller, 500 = die Farbe, 600–900 dunkler	automatisch je Farbe
Schrift auf einer Farbe	`--color-primary-on` (Weiß oder `#111827`, nach Kontrast oder „Schrift darauf“)	automatisch je Farbe
Breakpoints	`--breakpoint-sm` (40rem = 640 px) … `--breakpoint-2xl` (96rem = 1536 px), SCSS `$breakpoint-md`	Theme → Design-System
Schriftskala	`--bloqy-step--2` … `--bloqy-step-6`; `body` nutzt Stufe 0, `h1` Stufe 5	Theme → Typografie
Schriften	`--font-jakarta`, `--font-lora` (je Schrift der Bibliothek)	Theme → Typografie → Schriften
Abstandsskala	`--bloqy-space-xs`, `-s`, `-m`, `-l`, `-xl`, `-2xl`, `-3xl` (nur wenn Abstände aus der Skala berechnen an ist)	Theme → Design-System
Ecken und Schatten	`--bloqy-radius-s\|m\|l`, `--bloqy-shadow-s\|l`, Standard-Ecken `--bloqy-radius-button`, `-image`, `-box`, `-field`	Gestaltung → Blöcke → Stile „Ecken“ und „Schatten“
Eigene Variablen	z. B. `--header-hoehe`, `$header-hoehe`	Theme → Variablen

Theme Design-System mit Breakpoints und fließender Abstandsskala — Theme → Design-System: Breakpoints mit Variablennamen, darunter die Werte der Abstandsskala je Bildschirmbreite

Theme Typografie mit Schriften und deren Variablen — Theme → Typografie: rechts neben jeder Schrift steht ihre Variable

Variablen, die Klassen setzen

Einige Variablen gelten nicht global, sondern setzt eine Klasse für ihren Block und alles darin. Im SCSS eines Designs kannst du sie lesen:

Variable	Gesetzt von	Bedeutung
`--bloqy-radius`	Stil „Ecken“ (`bloqy-radius-*`)	Eckenradius des Blocks, gilt auch für Bilder darin
`--bloqy-gap`	Stil „Abstand zwischen Spalten und Zeilen“ (`bloqy-gap-*`)	Abstand zwischen Spalten, Karten und Bildern
`--bloqy-surface`	Farbklassen `bloqy-bgc-*`	aktuelle Hintergrundfarbe, z. B. für Verläufe an Kanten
`--bloqy-btn-color`	Stil „Button-Farbe“ und dunkle Flächen	Farbe von Buttons

Eigene Variablen anlegen

Theme Variablen mit Kategorien, Name, Wert, Beschreibung und Verwendung — Theme → Variablen: Kategorien mit ihren Variablen

Öffne Gestaltung → Theme → Variablen.
Lege unten mit Kategorie hinzufügen eine Kategorie an und wähle ihre Art: Farbe (mit Farbwähler), Größe oder Text.
Klicke in der Kategorie Neue Variable hinzufügen und trage Name, Wert und eine Beschreibung ein.
Speichere (Strg+S). bloqy übersetzt das Theme sofort neu; die Spalte Verwendung zeigt dann die Schreibweisen $name und var(--name).

Name: beginnt mit einem Buchstaben, danach Buchstaben, Ziffern, - und _, höchstens 61 Zeichen, eindeutig über alle Kategorien. Ein vorangestelltes $ oder -- entfernt bloqy.
Wert: ein SCSS-Ausdruck mit höchstens 200 Zeichen, z. B. #0e7490, 4.5rem, 768px oder "Inter", sans-serif. Nicht erlaubt sind ;, {, } und Kommentare.
Entfernen: Name und Wert leeren und speichern; eine ganze Kategorie entfernst du, indem du ihren Namen leerst.
Farben und Breakpoints gehören nicht hierher: Sie haben eigene Seiten (Theme → Farben, Theme → Design-System) und erscheinen unter Variablen nicht. Schriften lädst du unter Theme → Typografie in die Bibliothek.

Farb-Kategorien

Variablen in einer Kategorie der Art Farbe behandelt bloqy wie die Farben des Themes: Sie bekommen Abstufungen, -on und die Farbklassen bloqy-color-… und bloqy-bgc-…. Für Markenfarben ist trotzdem Theme → Farben → eigene Farben der bessere Ort, weil dort Kontrast und Vorschau stehen.

Wo Variablen wirken

Auf der ganzen Website: Die CSS-Variablen stehen auf :root in /theme/custom.css, also in allen Seiten, Seitenlayouts, Seitenteilen und im Editor-Rahmen. Den Admin selbst gestalten sie nicht.
In jeder SCSS-Datei: scss/_variables.scss wird als erste Datei eingebunden; $name steht deshalb in eigenen Teildateien, Stil-Paketen, Komponenten und im SCSS jedes Designs zur Verfügung.
Bei der Ausgabe: Eine Änderung wirkt nach dem Speichern sofort, weil bloqy das Theme neu übersetzt und den Seiten-Cache leert.
Im Tailwind-Build: Die Breakpoints aus dem Design-System gelten auch für Klassen wie md:, sobald der Tailwind-Build aktiv ist.

Variablen richtig verwenden

// Farbe: CSS-Variable, ohne Ersatzwert
.preisbox { background: var(--color-accent); color: var(--color-accent-on); }

// Breakpoint: SCSS-Variable (CSS-Variablen gehen in Media Queries nicht)
@media (min-width: $breakpoint-lg) { .preisbox { padding: var(--bloqy-space-l); } }

// eigene Variable aus Theme → Variablen
.site-header { min-height: var(--header-hoehe); }

Verwende in eigenem CSS lieber die CSS-Variablen als die SCSS-Variablen: Sie lassen sich in einem Bereich überschreiben (z. B. --bloqy-gap in einer Sektion) und folgen Änderungen ohne neuen Build. SCSS-Variablen brauchst du nur, wo CSS keine Variablen erlaubt, etwa in Media Queries oder SCSS-Funktionen wie color.adjust().