Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

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

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-variables feature across the major browsers from caniuse.com

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 3 Kommentare

  1. Sabine
    schrieb am 17.12.2020 um 11:08 Uhr:

    Danke Jonas für deine Antwort

    Antworten
  2. Sabine
    schrieb am 10.12.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

    Antworten
    • Jonas Hellwig
      schrieb am 11.12.2020 um 08:07 Uhr:

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

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →