Systemfarbschema erkennen

Die CSS-Media-Query prefers-color-scheme erkennt, ob das Betriebssystem des Benutzers für ein dunkles oder helles Farbschema konfiguriert ist. Sie akzeptiert zwei Werte: dark und light. Diese Einstellung wird auf Betriebssystemebene in den Systemeinstellungen festgelegt, nicht im Browser.

Sie können dunkle Stile vollständig mit CSS anwenden, und zwar über @media (prefers-color-scheme: dark) { ... }. Innerhalb dieses Blocks überschreiben Sie Farben, Hintergründe und Rahmen passend zu einer dunklen Farbpalette. Dieser Ansatz benötigt kein JavaScript und funktioniert sogar, bevor React gemountet wird.

In JavaScript gibt window.matchMedia('(prefers-color-scheme: dark)') ein MediaQueryList-Objekt zurück. Damit können Sie die aktuelle Systemeinstellung innerhalb von React-Hooks oder Event-Handlern programmgesteuert auslesen. Dies bildet die Brücke zwischen CSS-Media-Queries und Ihrer JS-Logik.

Das MediaQueryList-Objekt besitzt eine matches-Eigenschaft, die einen Boolean zurückgibt. Ist matches true, befindet sich das System im Dark Mode; bei false im Light Mode. Typischerweise lesen Sie diesen Wert beim Mounten einmal aus, um den Theme-Status zu initialisieren.

Benutzer können ihr Farbschema im Betriebssystem jederzeit ändern. Um dynamisch darauf zu reagieren, rufen Sie mediaQuery.addEventListener('change', handler) auf, wobei handler das aktualisierte MediaQueryListEvent empfängt. Das Ereignisobjekt besitzt ebenfalls einen booleschen Wert matches, der die neue Einstellung widerspiegelt.

Ein sauberer Ansatz besteht darin, einen benutzerdefinierten Hook mit useSyncExternalStore zu erstellen. Der Hook abonniert mediaQuery.addEventListener und stellt eine Snapshot-Funktion bereit, die mediaQuery.matches zurückgibt. So bleibt der Hook mit der externen Browser-API synchron, ohne dass Sie den Zustand manuell verwalten müssen.

Wenn Ihre Komponente ausgehängt wird, müssen Sie den Event-Listener entfernen, um Speicherlecks zu vermeiden. Rufen Sie im Cleanup von useEffect mediaQuery.removeEventListener('change', handler) auf. Bei useSyncExternalStore muss die Subscribe-Funktion eine Unsubscribe-Funktion zurückgeben, die dasselbe tut.

Die Systemeinstellung ist das, was das Betriebssystem meldet. Benutzer möchten das App-Theme jedoch häufig unabhängig davon überschreiben, etwa die App hell lassen, während das Betriebssystem im Dark Mode ist. Ihre Architektur sollte zwischen dem Systemstandard und einer expliziten, in localStorage gespeicherten Benutzerüberschreibung unterscheiden.

Mit den Chrome DevTools können Sie Farbschema-Einstellungen simulieren, ohne die Betriebssystemeinstellungen zu ändern. Öffnen Sie die DevTools, wechseln Sie zum Tab „Rendering“ und suchen Sie das Dropdown-Menü „Emulate CSS media feature prefers-color-scheme“. Dies ist beim schnellen Testen beider Themes während der Entwicklung äußerst hilfreich.

Eine gute Dark-Mode-Implementierung liest die Systemeinstellung als standardmäßigen Ausgangspunkt aus und wendet sie sofort an. Damit respektieren Sie die Barrierefreiheitseinstellung des Benutzers. Erst wenn der Benutzer das Theme in Ihrer App ausdrücklich umschaltet, sollten Sie eine abweichende Überschreibung speichern und verwenden.

Auf dem Server ist window.matchMedia nicht vorhanden. Wenn Sie serverseitig rendern, prüfen Sie mit typeof window !== 'undefined', bevor Sie matchMedia aufrufen. Lesen Sie bei SSR-Apps die Benutzereinstellung stattdessen aus einem Cookie oder HTTP-Header aus, um Hydration-Mismatches zu vermeiden.

Welche Eigenschaft eines MediaQueryList-Objekts gibt an, ob die Media Query derzeit zutrifft?

Die prefers-color-scheme-Media-Query stellt die Farbpräferenz des Betriebssystems in CSS und JavaScript bereit. Verwenden Sie window.matchMedia, um Änderungen auszulesen und zu verfolgen, bereinigen Sie Event-Listener stets und unterscheiden Sie zwischen Systemstandards und Benutzerüberschreibungen. Die Emulation in den Chrome DevTools beschleunigt das Testen beider Themes.