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

Downloads:

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.