kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Farb-Systeme mit CSS-Variablen gestalten

Benutzeroberflächen in verschiedenen farbigen Varianten müssen in vielen Projekten umgesetzt werden. Mal soll ein Farbleitsystem zur Unterstützung der Navigation integriert werden, dann wieder muss das Projekt den Dark Mode unterstützen oder für Kunden individuell anpassbar sein – Stichwort »Theming«. Mit Hilfe von CSS-Variablen lässt sich ein solches Farb-System mit geringem Aufwand in eine Website integrieren.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

CSS-Variablen definieren

Durch die Erstellung von CSS-Variablen innerhalb des :root-Selectors legen wir die globalen Eigenschaften des Designs (auch Design Tokens genannt) fest. Die so definierten Farben dienen als Standard-Farben des Layouts, die wir an späterer Stelle für die farblichen Varianten überschreiben.

Wir verwenden im Beispiel das HSLA-Modell, um die Farben zu definieren. HSLA steht für Hue, Saturation, Lightness, Alpha (Farbton, Sättigung, Helligkeit, Alpha-Transparenz). Im Gegensatz zu RGB oder Hexadezimalfarben, ist es so später einfacher mit verschiedenen Abstufungen einer Farbe zu arbeiten, da nur die Werte für Helligkeit und Transparenz verändert werden müssen.

Die CSS-Variablen beginnen immer mit zwei Bindestrichen (--name-der-variable), es folgt der vergebene Wert:

:root {
  /* Rot */
  --highlight-color-h: 0; 
  --highlight-color-s: 100%;
}

CSS-Variablen anwenden

Nachdem wir die Variablen definiert haben, können wir sie im CSS-Code verwenden. Hierzu schreiben wir an den Stellen, an denen wir die Variablen einfügen wollen, var() und den Namen der Variable innerhalb der Klammern. Da wir im :root nur den Farbton (Hue) --highlight-color-h und die Sättigung (Saturation) --highlight-color-s angegeben haben, müssen wir jetzt noch, Helligkeit (Lightness) und Transparenz (Alpha) angeben. Mit diesen Werten können wir verschiedene Abstufungen der »Highlight-Color« erzeugen, ohne dass sich der Farbton ändert.

.teaser {   
  border: 1em solid hsla(var(--highlight-color-h), var(--highlight-color-s), 75%, 100%);   
  background: hsla(var(--highlight-color-h), var(--highlight-color-s), 80%, 100%);
}

.teaser__heading {   
  color: hsla(var(--highlight-color-h), var(--highlight-color-s), 26%, 100%);
}

.teaser__link {
  color: hsla(var(--highlight-color-h), var(--highlight-color-s), 26%, 100%);
}
Screenshot des Teasers mit verschiedenen Farbabstufungen von Rot für Hintergrund, Kontur und Textfarbe

CSS-Variablen überschreiben

Um nun ein System mit verschiedenen Farben zu erzeugen, müssen wir die --highlight-color-h  und eventuell --highlight-color-s überschreiben, sobald bestimmte Bedingungen erfüllt sind. Im Beispiel passen wir die Farbe immer dann an, wenn die Klasse .thema-1, .thema-2 bzw. .thema-3 vorhanden ist.

.thema-1 {
  /* Gelb */
  --highlight-color-h: 50;
}

.thema-2 {
  /* Grün */
  --highlight-color-h: 125; 
  --highlight-color-s: 70%;
}

.thema-3 {
  /* Blau */
  --highlight-color-h: 200; 
}
Verschieden eingefärbte Boxen mit Hilfe der CSS-Variablen

SVG-Background mit CSS-Variablen umfärben

SVG-Backgrounds, z.B. Icons lassen sich mit einem kleinen Trick auch mit CSS-Variablen umfärben. Hierzu verwenden wir die CSS-Eigenschaft mask-image und unsere »Highlight-Color« als Hintergrundfarbe eines ::before-Pseudoelements.

In den oben gezeigten Beispielen ist das Pfeil-Icon mit dieser Technik realisiert.

.teaser__link::after {
  content: '';
  background-color: hsla(var(--highlight-color-h), var(--highlight-color-s), 26%, 100%);
  mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d=" … " /></svg>');
  mask-size: contain;
  
  … 
}

Beispiel anschauen

 

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

3 Kommentare

  1. Sabine

    Verfasst am 10. Dezember 2020 um 13:24 Uhr.

    Danke für diesen guten Artikel.

    Sollte man diese Technik wirklich schon einsetzen? Der Browsersupport ist ja noch nicht besonders gut. Oder kann man auf Opera mini verzichten?

    https://caniuse.com/?search=CSS%20variables

    • Jonas Hellwig

      Verfasst am 11. Dezember 2020 um 8:07 Uhr.

      Die Technik gilt als praxistauglich. Auch große Brands mit eher konservativem Browserverhalten in der Zielgruppe setzen CSS-Variablen ein.

  2. Sabine

    Verfasst am 17. Dezember 2020 um 11:08 Uhr.

    Danke Jonas für deine Antwort

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.