Variable Farben in Bricks

tl;dr: Werte wie Farben in Variablen zu organisieren ist gehobener Standard im Webdesign. Bricks geht eine Stufe weiter: mit dem Color-Manager wird es einfach Farben und Farbskalen für Dunkelmodus und andere Anwendungen zu erstellen.

Color Manager
Dunkel Modus
Farbtöne
Harmonien
Hilfsklassen
Fazit

Color Manager

Wie wiederkehrende Werte in CSS Variablen organisiert werden habe ich hier besschrieben. Bricks geht aber einen Schritt weiter als nur einfach Farbwerte in Variablen zu packen: es bietet uns eine Logik für den Aufbau eines Dunkelmodus mit wenigen Klicks. Organisiert wird das über

Bricks > Stile > Farben

Bei einer Neuinstallation serviert uns Bricks einen brauchbaren Querschnitt durch das Spektrum (wie bei anderen Buildern auch aber ohne schwarz und weiss.)

Im Toolbar rechts kann man die Palette bearbeiten (umbenennen, löschen), eine weitere Palette erstellen, importieren und exportieren (.json) und die Palette auch direkt im CSS code anschauen/exportieren (.css).

Es empfiehlt sich eine eigene Palette anzulegen und auch wirklich nur die Farben darin zu halten, die man wirklich verwendet (jedes Byte zählt)

Bricks Default Farben — Die Standard-Farbpalette in Bricks. Paletten lassen sich einfach im- und exportieren.

:root {
  --bricks-color-grey-100: #f5f5f5;
  --bricks-color-grey-300: #e0e0e0;
  --bricks-color-grey-500: #9e9e9e;
  --bricks-color-grey-700: #616161;
  --bricks-color-grey-800: #424242;
  --bricks-color-grey-900: #212121;
  --bricks-color-yellow: #ffeb3b;
  --bricks-color-amber: #ffc107;
  --bricks-color-orange: #ff9800;
  --bricks-color-deep-orange: #ff5722;
  --bricks-color-red: #f44336;
  --bricks-color-purple: #9c27b0;
  --bricks-color-blue: #2196f3;
  --bricks-color-light-blue: #03a9f4;
  --bricks-color-sky-blue: #81D4FA;
  --bricks-color-green: #4caf50;
  --bricks-color-light-green: #8bc34a;
  --bricks-color-lime: #cddc39;
}

Wenn man nichts anders einstellt ist das wenig überraschend einfach eine kompakte Liste von Namen mit Farbwerten. Die Anwendung der Farben innerhalb des Editor ist denkbar einfach:

Die Anwendung ist denkbar einfach: überall, wo Farben eingestellt werden können taucht auch das icon für die Farbpalette auf.

Bricks Farbpalette auswählen — Wenn es Farben einzustellen gilt kann man (auch) die Farbpalette(n) wählen.

Hat man die Palette als Optio gewählt gibt es eine Farbboxengrid, darunter eine Auswahl um die Palette zu wechsel, ganz unten die Möglichkeit erstellte Farben einer Palette zuzuweisen, von der Grid- in eine Listenansicht zu wechseln und den direkten Link zur Bearbeitung der Palette im Stil-Bereich.

Vorteil: es geht schnell und einfach. Nachteil: hat man eine (zu) große Farbpalette wird es schon mal recht fummelig im kleinen Modalfenster zu scrollen.

Bricks Farbpalette Auswahl — Über Farbboxen lässt sich die Wunschfarbe aussuchen.

Dunkel Modus

Will man nun einen Umschaltbaren darkmode auf seiner Website umsetzen bietet Bricks dafürfolgende Technik an: für jede Farbe kann eine „Dunkelfarbe” aktiviert werden. Diese wird beim Aktivieren der Option algorithmisch erstellt, kann aber natürlich auch angepasst werden. Das Beispiel zeigt dunkles Grün, wofür Bricks ein helles grün als Dunkel-Modus Farbe erstellt hat.

Um diese Farben zu nutzen muss man den Dunkel Modus aktivieren. Dazu hat Bicks einen Block mit dem Namen Umschalten - Modus eingebaut. Der kann überall (üblicher Weise im Header) positioniert werden damit der User bei bedarf umschalten kann. Das Beispiel hier zeigt 2 Container in denen die Farbem Schwarz, Weiss, 2 Grautöne und das erstellte Grün als Schriftfarbe angewandt wurden.

Dunkelmodus hell — Im Modus hell ist die dunkelgrüne Überschrift zu erkennen

Dunkelmodus dark — Ist der Modus dunkel werden die Farben gemäß den Einstellungen ersetzt.

Was man an dem Beispiel auch gleich sehen kann: nur Bereiche, die auch wirklich mit den entsprechend definierten Farben verbunden sind schalten um. Das Umschalticon selber sowie der Hintergund der Seite bleiben unverändert.
Will man einen Darkmode umsetzen ist es also extrem wichtig, wirklich alle Bereiche der Seite zu definieren damit der Effekt auch funktioniert.

Am wichtigsten ist hier die Hintergrundfarbe der Seite selber. Die ist unter

Bricks > Verwalten > Seiteneinstellungen | Allgemein > Seitenhintergrund

zu finden. Ist dort eine von jenen Farben eingestellt die einen definierten Dunkelmodus haben schaltet die „ganze Seite” um.

Bricks Seiteneinstellungen Hintergrundfarbe — Damit die ganze Seite umschaltet, muss der Seitenhintergrund mit einer aktiven Farbe besetzt sein.

Farbtöne

Zu jeder Farbe, die man im Bricks Color Manager anlegt, kann man 3 verschiedene sog. Farbtöne anlegen. Farbtöne sind Varianten der Ursprungsfarbe, die automatisch in Schritten angelegt werden können. Es sind bis zu 10 Schritte möglich, es gibt die 3 Bereiche Helle Farbtöne, Dunkle Farbtöne und Transparente Farbtöne.

Hat man zuvor den Dunkelmodus für eine Farbe aktiviert werden diese Farbtöne für die helle und für die dunkle Farbe errechnet.

Eingesetzt werden diese Farbtöne von Hand. Klassiche Anwendungen sind hover-Farben, Rahmen, dezentere Farben bei untergeordneten Überschriften etc. Besonders, wenn vom Designer oder Kunden keine ganz genauen Vorgaben kommen kann es sehr hilfreich sein, mit nur einem Klick passende Farbtöne zu erstellen.

Bricks Button — Die Grundeinstellung des Buttons im Vollton.

Harmonien

Ein wenig unscheinbar versteckt aber recht praktisch kann auch die Option sein, Harmonien zu der bereits definierten Farbe erstellen zu lassen. Dazu gibt es ein paar gängige Farbmodelle, die auf Basis der Farbe zB. die im Farbkreis gegenüberliegende Farbe ausrechnen etc. Am Beispiel des Grüns sehen wir hier die 6 unterschiedlichen Harmonien, die Bricks erstellen würde:

Hilfsklassen

Als letzte Option bei der Farbverwaltung bietet Bricks an, sog. Hilfsklassen zu erstellen. Es stehen 6 Buttons zur Auswahl die aktiviert werden können. Für unser Beispiel der Farbe firmengruen werden unter

Bricks > Stile > Klassen

zusätzliche Klassen eingetragen.

Bricks Hilfsklassen — Nachdem Farben und Farbtöne definiert wurden kann man such bis zu 6 Hilfsklassen pro Farbe anlegen lassen.

Jetzt stehen die Farben auch einfach als Klassen zur Verfügung, je nach name wird klar, wofür sie verwenden werden können:

text-firmengruen -> definiert die Textfarbe
bg-firmengruen-l-2 -> setzt eine Hintergrundfarbe aus den erstellten Farbtönen (in dem l-2, also helle Farbtöne (l wie light) und 2 ist die zweite vorn 3 Farbtönen.

Es gibt background-color (Hintergrundfabe), color (Textfarbe), border-color (Rahmenfarbe), outline-color (zB. Outline bei Formfeldern), fill und stroke (für SVGs).

Hilfsklassenliste — Nach Auswahl der gewünschten Klassen werden in diesem Beispiel 8 Hilfsklassen generiert.

Folgende Anwendungen sind denkbar: in Code-Elementen oder bei ACF-Feldern steht keine Bricks-Color-Control zur Farbauswahl bereit. Ich kenne aber die Klassennamen der Farben und kann so stylen.

Gleiches gilt für drittanbeiter Plugins. Die Hilfsklasse ist dein Zugang zur zentralen Farbpalette.

Hilfsklassen Anwendung — Die generierten Klassen sind dann leicht anzuwenden im Editor.

Fazit

Bricks zeigt uns, dass Farben in Variablen bei Bedarf mehr sein können als nur eine praktische Rationalisierung. Mit der durchdachten Einbindung von Paletten, generierten Farbtönen, der Integration Farbtheoretische Ideen wir Harmonien bis hin zur automatisierter Übertragung in Klassen: noch nie war es so wichtig, Design und Inhat zu trennen und selten war es so clever, die Dinge danach wieder zu verbinden.

Veröffentlicht am: 21. August 2026
Letztes Update am: 21. August 2026