Ein Schalter für den Dark Mode

Die Seite hat jetzt eine dunkle Version, aber nur wir können sie umschalten, indem wir den Code bearbeiten. Besucher brauchen einen Button. Wir haben der Kopfzeile einen hinzugefügt, den Button „Dark Mode“ mit id="umschalter", und ein kurzes Skript am Ende des body:

<script>
	document.querySelector("#umschalter").addEventListener("click", function () {
		document.documentElement.classList.toggle("dark");
	});
</script>

Wenn jemand auf den Button klickt, fügt das Skript dem Element <html> die Klasse dark hinzu oder entfernt sie, wenn sie schon da ist. Mehr tut es nicht. Du musst nicht verstehen, wie es geschrieben ist: Das lernst du im JavaScript-Kurs. Dank der Zeile mit @custom-variant folgen alle deine dark:-Klassen dieser einen Klasse.

Der Schalter einer echten Website tut meist etwas mehr: Er beginnt mit der Systemeinstellung des Besuchers und merkt sich seine Wahl für den nächsten Besuch. Das braucht ein paar Zeilen JavaScript mehr, aber die Idee bleibt gleich: die Klasse dark auf <html>.

Der Button selbst braucht Farben für beide Modi und eine Beschriftung, die sagt, was er tut. Eine Beschriftung kann sich ohne Skript mit dem Modus ändern: Setze beide Texte in den Button, jeden in ein eigenes span, und blende den, der nicht passt, mit hidden (display: none) aus:

<span class="dark:hidden">Dark Mode</span>
<span class="hidden dark:inline">Light Mode</span>

Im hellen Modus wird der erste angezeigt, und der zweite ist ausgeblendet. Im Dark Mode ist es umgekehrt: dark:hidden blendet den ersten aus, und dark:inline zeigt den zweiten (display: inline, er bleibt also in der Zeile wie normaler Text).