English version

In diesem Artikel zeige ich Ihnen, wie Sie mit einer relativ einfachen Methode das Farbthema Ihrer Website ändern können. Ich verwende für das Design unterschiedlicher Farbthemen CSS Custom Properties (auch CSS-Variable genannt).

Farbthemen verändern Stimmungen – Bild: Simon Berger auf Pixabay

Auf diese Weise kann man die eigene Website im Handumdrehen z. B. der Jahreszeit, einem monatlichen Schwerpunkt oder einfach der Stimmungslage anpassen.

Das Beispiel-Template

In meinem Beispiel geht es nicht um exaktes Design oder darum, einen Schönheitspreis zu gewinnen. Die Beispiele sind was sie sind: Beispiele oder Vorlagen für interessierte LeserInnen, die diese weiterentwickeln und damit ihre eigene Website gestalten möchten.

Monochrome Farbpaletten

Daher halte ich die Gestaltung so einfach wie möglich. Ich verwende vier monochromatische Farbpaletten, die ich den vier Jahreszeiten zuordne: Grün (mit gelb-orangen Farbtupfern für die Blüte) für den Frühling, Blau (mit sonnig-sandigen Farbsprengseln) für den Sommer, Braun (mit rötlichen Akzenten) für den Herbst und Rot (mit grünen Hoffnungskleksen) für den Winter.

Ein wenig Arbeit ist dennoch damit verbunden. Je nachdem, wie viele Farbänderungen möglich sein sollen, müssen genauso viele Farbpaletten erstellt werden.

Ich verwende in der CSS-Datei die hexadezimale Schreibweise für die Farbgebung, damit es übersichtlich bleibt. Erstellt habe ich die Farbpaletten allerdings mithilfe der hsl-Schreibweise. Vorteil: Ich behalte den Ton (hue, dafür steht das h in hsl) bei und variiere die Farbnuancen über die Sättigung (saturation, dafür steht das s in hsl) und die Helligkeit (lightness oder luminosity, dafür steht das l in hsl). Saturation und Lightness werden in Prozent angegeben, sodass man darüber die Varianten gut einstellen kann.

(Mehr zur Farbcodierung und den Unterschieden s. hier und hier )

Farbwähler oder Colourpicker verwenden

Für die Ermittlung der Farbnuancen nutzt man am besten einen Farbwähler oder Colourpicker, die es online zu hauf gibt oder die in den gängigen Editoren verfügbar sind. Einfach eine Onlinesuche starten mit "farbwähler online" oder "editor mit farbwähler".

Praktisch sind für diesen Zweck die online verfügbaren colour scheme generators oder colour palette generators (s. dazu die Links unter diesem Artikel).

Theming mit CSS-Variablen

Für jede Farbpalette habe ich mir eine Ausgangsfarbe gewählt, die ungefähr eine mittlere Sättigung und Helligkeit hat. Davon ausgehend habe ich dann abgestuft hellere und dunklere Farbnuancen erstellt. Das machen auch einige Online-Tools für Sie, die ich weiter unten unter "Links" aufgeführt habe.

Wichtig ist, dass die Variablen allgemein gültige Namen erhalten wie --light-color oder --darker-color und nicht --light-green oder --darker-green. Hinter --light-green steckt eben eine grüne Farbe, während hinter --light-color jede beliebige helle Farbe stehen kann. Das heißt, für jede Farbpalette müssen die Bezeichnungen der Variablen identisch sein, damit sie leicht austauschbar sind.

Vorgehensweise

Ich arbeite in der CSS-Datei und benötige nur eine CSS-Datei. In dieser CSS-Datei hinterlege ich alle vier Farbthemen und kommentiere die drei aus, die ich nicht benötige. Möchte ich das Farbthema wechseln, so kommentiere ich das aktuelle Thema aus und das gewünschte Farbschema kommentiere ich ein (s. dazu hier). Im folgenden Beispiel wechsele ich von Frühling/Grün nach Sommer/Blau:

Vorher - Das Thema "Frühling/Grün ist aktiv

/* Green Theme - Spring */
:root {
  --colored-white: #F7FFF2;
  --pale-color: #E0FFCC;
  --lightest-color: #BCE6A1;
  --lighter-color: #9BCC7A;
  --light-color: #7BBF4D;
  --default-color: #69B336;
  --dark-color: #51991F;
  --darker-color: #30660A;
  --darkest-color: #1C4003;
  --strong-color: #102600;
  --color-accent-1: #FFA500;
  --color-accent-2: #E6E600;
}


/* Blue Theme - Sommer */
/*
:root {
  --colored-white: #F2F4FF;
  --pale-color: #CCD5FF;
  --lightest-color: #99ABFF;
  --lighter-color: #6681FF;
  --light-color: #3357FF;
  --default-color: #002BFF;
  --dark-color: #0024CC;
  --darker-color: #001B99;
  --darkest-color: #001266;
  --strong-color: #000933;
  --color-accent-1: #FFFF40;
  --color-accent-2: #E6E61F;
}
*/


...

Nachher - Das Thema Sommer/Blau ist aktiv

/* Green Theme - Spring */
/*
:root {
  --colored-white: #F7FFF2;
  --pale-color: #E0FFCC;
  --lightest-color: #BCE6A1;
  --lighter-color: #9BCC7A;
  --light-color: #7BBF4D;
  --default-color: #69B336;
  --dark-color: #51991F;
  --darker-color: #30660A;
  --darkest-color: #1C4003;
  --strong-color: #102600;
  --color-accent-1: #FFA500;
  --color-accent-2: #E6E600;
}
*/

/* Blue Theme - Sommer */
:root {
  --colored-white: #F2F4FF;
  --pale-color: #CCD5FF;
  --lightest-color: #99ABFF;
  --lighter-color: #6681FF;
  --light-color: #3357FF;
  --default-color: #002BFF;
  --dark-color: #0024CC;
  --darker-color: #001B99;
  --darkest-color: #001266;
  --strong-color: #000933;
  --color-accent-1: #FFFF40;
  --color-accent-2: #E6E61F;
}
...

Nun, das war es auch schon. Eine einfache, aber effektive Methode, um das Look & Feel einer Website rasch nach Bedarf zu verändern!

Das Ergebnis können Sie auf meiner Demo-Site sehen. Sie können sich das Template für die Farbthemen-Variationen auch herunterladen.

Links

Speziell für monochromatische Paletten eigenen sie die Tools von hexcolortool.com und 0to255.com.

Die Erstellung von komplexen Farbpaletten erleichtern donesmart.com und pinetools.com.

Und wer lieber mit CSS-Farbnamen arbeitet, wird bei enes.in fündig.

Wer etwas tiefer graben möchte und komplexere Methoden sucht, der liest den Artikel von Dieter Raber auf css-tricks.com und den Beitrag von Michelle Barker im Blog von logrocket.com.

--> Das Template auf Codepen.

--> Hier geht es zur Demo-Site.

--> Hier können Sie sich das Template downloaden.

In der ZIP-Datei finden Sie die HTML-Datei und die CSS-Datei zum Template.

Viel Spaß bei der Anwendung und Weiterentwicklung der Vorlage!