Quelltext der Seite Dunkles Design mit CSS

In den letzten Jahren ist der Dark Mode zu einem integralen Bestandteil des modernen Webdesigns geworden. Er reduziert nicht nur die Augenbelastung beim Arbeiten unter schwachen Lichtverhältnissen, sondern spart auch Akkuleistung bei Geräten mit OLED-Displays. Die Implementierung eines dunklen Designs auf einer Website mittels CSS ist relativ einfach, muss aber korrekt umgesetzt werden, damit Benutzer problemlos zwischen heller und dunkler Version wechseln können.

== Grundprinzipien der Arbeit mit Designs ==
Dunkle und helle Designs sind zwei Sätze von Stilen, die dynamisch auf Website-Elemente angewendet werden können. Idealerweise sollten Benutzer die Möglichkeit haben, selbst zu wählen, welches Design sie verwenden möchten, aber auch die Systemeinstellungen des Betriebssystems können berücksichtigt werden.

Es gibt zwei Hauptmethoden zur Implementierung eines dunklen Designs:

* Verwendung von CSS-Variablen und Umschalten der Stile mittels JavaScript
* Automatische Anwendung des Designs basierend auf Systemeinstellungen mittels <code>prefers-color-scheme</code>

Beide Ansätze können kombiniert werden, um die Design-Handhabung flexibler zu gestalten.

== Verwendung von CSS-Variablen für das Design ==
Eine der praktischsten Methoden zur Implementierung eines dunklen Designs ist die Verwendung von CSS-Variablen (<code>custom properties</code>). Dies ermöglicht eine einfache Verwaltung von Farben und anderen Stilparametern.

Zunächst erstellen wir Root-Variablen in <code>:root</code>, die im gesamten Dokument verwendet werden:
<syntaxhighlight lang="css" copy>
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

.dark-theme {
    --bg-color: #121212;
    --text-color: #ffffff;
}
</syntaxhighlight>
Dann wenden wir diese Variablen auf die Seitenelemente an:
<syntaxhighlight lang="css" copy>
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}
</syntaxhighlight>
Jetzt muss nur noch die Klasse <code>.dark-theme</code> zu <code><html></code> oder <code><body></code> hinzugefügt werden, um die Farben zu ändern.

== Designs mit JavaScript umschalten ==
Um Benutzern das Umschalten zwischen hellem und dunklem Design zu ermöglichen, können Sie JavaScript verwenden:
<syntaxhighlight lang="javascript" copy>
const toggleThemeBtn = document.getElementById('theme-toggle');

toggleThemeBtn.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark-theme');

    // Speichern der Benutzerauswahl im localStorage
    if (document.documentElement.classList.contains('dark-theme')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

// Gespeicherte Einstellungen beim Laden der Seite prüfen
if (localStorage.getItem('theme') === 'dark') {
    document.documentElement.classList.add('dark-theme');
}
</syntaxhighlight>
Auf diese Weise bleibt die Auswahl des Benutzers auch nach dem Neuladen der Seite erhalten.

== Automatische Erkennung des System-Designs ==
Wenn Sie die Systemeinstellungen des Benutzers berücksichtigen möchten, können Sie <code>prefers-color-scheme</code> verwenden. Diese Medienabfrage wendet automatisch das entsprechende Design an:
<syntaxhighlight lang="css" copy>
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
    }
}
</syntaxhighlight>
Diese Methode ist praktisch, da sie die Website sofort an die Systemeinstellungen anpasst. Wenn der Benutzer jedoch ein Design manuell auswählen möchte, müssen Sie diesen Ansatz mit JavaScript kombinieren.

== Kombination von automatischer Erkennung und manueller Auswahl ==
Um beide Methoden zu berücksichtigen, können Sie zunächst prüfen, ob eine gespeicherte Design-Auswahl im <code>localStorage</code> vorhanden ist. Falls nicht, werden die Systemeinstellungen angewendet:
<syntaxhighlight lang="javascript" copy>
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (userTheme) {
    document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
} else {
    document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
}
</syntaxhighlight>

== Erstellen eines benutzerfreundlichen Umschalters ==
Nun fügen wir einen Design-Umschaltknopf in HTML hinzu:
<syntaxhighlight lang="html" copy>
<button id="theme-toggle">Design umschalten</button>
</syntaxhighlight>
Der Button ermöglicht dem Benutzer das manuelle Ändern des Designs, und die Logik zum Speichern der Auswahl macht die Interaktion komfortabel.

== Verbesserung der Übergangsanimationen ==
Um den Design-Wechsel sanft erscheinen zu lassen, können Sie eine Animation hinzufügen:
<syntaxhighlight lang="css" copy>
* {
    transition: background-color 0.3s, color 0.3s;
}
</syntaxhighlight>
Dies erzeugt einen weichen Abdunkelungs- oder Aufhellungseffekt beim Umschalten der Designs.

== Beispiel für Hell-Dunkel-Design-Umschaltung ==
{{#widget:Iframe
|url = https://codeeditor.ru/code.php?id=2502AUUwBzN5Vw&lang=de
|height = 500px
|title = Dunkles Design mit CSS
}}

== Fazit ==
Die Implementierung eines dunklen Designs auf einer Website mittels CSS und JavaScript ist eine relativ einfache, aber wichtige Aufgabe. Die Verwendung von CSS-Variablen macht den Code praktisch und skalierbar, während die Kombination von <code>prefers-color-scheme</code> und <code>localStorage</code> den Benutzern Flexibilität bei ihrer Auswahl bietet. Als Ergebnis wird die Website adaptiv und bei allen Lichtverhältnissen angenehm zu benutzen sein.

==Verwandte CSS-Artikel==
{{Enzyklopädie CSS/Navigation}}
[[Category:CSS]]
[[wj-ru:Темная тема с использованием CSS]]
[[wj-en:Dark Theme using CSS]]
[[wj-fr:Thème sombre avec CSS]]
[[wj-es:Tema oscuro usando CSS]]
[[wj-it:Tema scuro con CSS]]