CSS4 – Light & Dark Theme mit CSS Custom Properties (Variablen)

Tutorial CSS4

von Ardian Shala, 15.03.2019
Ein Light und Dark Theme kann sehr einfach mit CSS Custom Properties (Variables), welche von modernen Browsern unterstützt werden, umgesetzt werden.
Vorraussetzung:
  • CSS Custom Properties - link

Downloads:

Stackblitz Demo

Default CSS Custom Properties definieren

Folgend werden die default Werte definiert.
Hierfür muss eine Custom Property mittels Spiegelstriche initialisiert werden.

body {
    --bg-color: #F3F7F9;;
    --body-color: #444;
}

Dark CSS Custom Properties definieren

Anschließend definieren wir mittels CSS Attribute Selektor Werte, welche die zuvor definierten Werte überschreiben.
Sobald das Html body-Tag also das data-Attribute mit dem Wert dark gesetzt bekommt, werden die folgend definierten Variablen angewendet.

body[data-theme="dark"] {
    --bg-color: #0D2538;
        --body-color: #ced8de;
}

CSS Beispiel Klassen erstellen

Folgend werden die zuvor definierten CSS Variablen nun HTML Elementen zugewiesen.

body {
    background-color: var(--bg-color);
    color: var(--body-color);
    transition: color .6s, background-color .6s;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

Toggle Button erstellen

Zum Hin- und Herschalten der Themes benötigen wir ein HTML Element – hier mit einem Button umgesetzt.

<button>toggle theme</button>

Button EventListener erstellen

Mittels click EventListener wird nun das Umschalten implementiert.
Hierfür wird abgefragt, ob sich das data-theme Attribute im body Tag befindet und wird entsprechend entfernt oder hinzugefügt.

const button = document.querySelector('button');
button.addEventListener('click', () => {
    if (document.body.hasAttribute('data-theme')) {
            document.body.removeAttribute('data-theme');
    } else {
            document.body.setAttribute('data-theme', 'dark');
    }
});

Klickt man nun auf den Button, schaltet das Theme mit einer CSS Transition hin und her.

#css4 #dark #light #theme

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien. Full Stack Entwickler mit AngularJs, Angular, Ionic und C#.