prefers-color-scheme
prefers-color-scheme ist eine CSS-Media-Query, die das vom Betriebs-System gesetzte Farb-Schema (hell oder dunkel) erkennt. Sie ist die Grundlage für einen automatisch passenden Dunkel-Modus auf Websites – ohne dass Besucher einen Umschalt-Knopf bedienen müssen.
prefers-color-scheme ist die technische Grundlage für die automatische Dunkel-Modus-Auslieferung. Sie wirkt sowohl als Komfort-Funktion für moderne Auftritte als auch als Barrierefreiheits-Hilfe für Menschen mit Lichtempfindlichkeit oder Migräne-Veranlagung.
In einfachen Worten
Moderne Betriebs-Systeme bieten eine systemweite Einstellung für die Helligkeit der Oberfläche, ähnlich der Bewegungs-Einstellung prefers-reduced-motion: heller Modus (heller Hintergrund, dunkler Text) oder dunkler Modus (dunkler Hintergrund, heller Text). Wer den dunklen Modus aktiviert, signalisiert dem Browser über prefers-color-scheme: dark, dass die Präferenz dort liegt. Websites können diese Information aufgreifen und automatisch das passende Farb-Schema laden – ohne Umschalt-Knopf in der Navigation, ohne Speicher-Logik im Browser. Barrierefreiheits-Aspekt: Manche Besucher benötigen den dunklen Modus aus medizinischen Gründen – etwa bei Lichtempfindlichkeit, Migräne-Veranlagung oder bestimmten Seh-Einschränkungen. Ein nicht reagierender Auftritt zwingt diese Gruppe in eine unkomfortable oder symptom-auslösende Darstellung.
Wozu brauche ich das?
Standard für moderne Websites, besonders relevant bei inhalts-lastigen Auftritten (Blog, Wiki, Dokumentation, Magazin), in denen Besucher längere Zeit lesen. Auch für Premium-Marken-Auftritte: ein durchdachtes Dunkel-Modus-System signalisiert Sorgfalt, Aktualität und Usability. Die Umsetzung erfolgt in der Regel über CSS-Variablen (Custom Properties) – das Farb-System wird im hellen Modus definiert und im dunklen Modus über eine Media-Query überschrieben, statt parallel zwei vollständige Stil-Sätze zu pflegen.
Beispiel aus der Praxis
Eine typische Premium-Website mit Dunkel-Modus-Unterstützung: Im hellen Modus zeigt sie eine helle, sachliche Oberfläche; im dunklen Modus übernimmt automatisch ein abgestimmtes Farb-System mit kontraststarken Akzent-Farben. Besucher, die ihr Betriebs-System auf den dunklen Modus gestellt haben, sehen die Website sofort im passenden Modus – ohne einen Umschalt-Knopf bedienen zu müssen und ohne dass die Seite zuerst hell erscheint und dann ruckartig umschaltet. Die Umsetzung erfolgt im Stil-Root: Die Farb-Variablen werden für den hellen Modus gesetzt und innerhalb der Media-Query prefers-color-scheme: dark gezielt überschrieben. Aufwand: einmaliges Konfigurations-Setup im Design-System plus Kontrast-Prüfung der dunklen Paarungen. Wirkung: barrierearm für Besucher mit Lichtempfindlichkeit und marken-aufwertend für moderne Auftritte.
Wirtschaftlicher Nutzen
Ein gut umgesetzter Dunkel-Modus ist marken-aufwertend ohne wiederkehrenden Pflege-Aufwand. Die einmalige Umsetzung im Design-System bleibt überschaubar; der Nutzen reicht von Barrierefreiheits-Konformität (Lichtempfindlichkeit, Migräne) über Marken-Wirkung („zeitgemäße Website") bis zur praktischen Lesbarkeit auf mobilen Endgeräten in dunkler Umgebung. Vorsichts-Punkt: Ein dunkles Farb-System ist keine reine Invertierung der hellen Farben – die Kontrast-Werte verhalten sich anders, jede Paarung muss separat gegen die WCAG-Anforderungen geprüft werden.
Typische Fehler
- Dunkler Modus als reine Invertierung des hellen Modus umgesetzt – die Kontrast-Werte stimmen nicht, die Lesbarkeit leidet.
- Nur der helle Modus gegen die WCAG-Anforderungen geprüft – die dunklen Farb-Paarungen werden vergessen und fallen durch.
- JavaScript-basierter Umschalt-Knopf ohne System-Standard – beim ersten Aufruf erscheint die Seite hell und schaltet anschließend ruckartig in den dunklen Modus, der erste Eindruck leidet.
- Die Marken-Akzent-Farbe unverändert in den dunklen Modus übernommen – sie wirkt dort häufig zu intensiv oder verliert Kontrast zum dunklen Hintergrund.
- Bilder mit transparenten Hintergründen nicht für den dunklen Modus getestet – Logos, Symbole und Bildschirm-Aufnahmen werden im dunklen Modus schlecht lesbar.
Worauf achten?
- CSS-Variablen (Custom Properties) für Farben verwenden – sie ermöglichen sauberes Überschreiben pro Modus.
- Im Stil-Root die Media-Query prefers-color-scheme: dark einsetzen und dort die Variablen überschreiben, statt parallel zusätzliche Stil-Regeln zu schreiben.
- Beide Modi separat gegen die WCAG-Kontrast-Anforderungen prüfen – der dunkle Modus verhält sich anders als der helle.
- Marken-Akzent-Farbe für den dunklen Modus häufig leicht heller oder weniger gesättigt einstellen – sonst wirkt sie aggressiv auf dunklem Grund.
- Bilder mit transparenten Hintergründen explizit prüfen – Logos, Symbole und Bildschirm-Aufnahmen brauchen häufig eine eigene Variante für den dunklen Modus.
Häufig gestellte Fragen
Was bewirkt prefers-color-scheme?
Die CSS-Media-Query erkennt, ob ein Besucher im Betriebs-System den hellen oder dunklen Modus aktiviert hat. Websites können auf dieser Grundlage automatisch das passende Farb-Schema ausliefern – ohne einen Umschalt-Knopf in der Navigation.
Brauche ich trotzdem einen Umschalt-Knopf?
Nicht zwingend. Eine Umsetzung über die System-Einstellung deckt den größten Teil der Anwendungs-Fälle ab. Ein zusätzlicher Knopf ist sinnvoll, wenn Besucher gezielt vom System-Standard abweichen möchten – etwa abends auf einem Gerät, das tagsüber im hellen Modus läuft.
Wie wird der Dunkel-Modus umgesetzt?
Üblicherweise über CSS-Variablen (Custom Properties), die im hellen Modus die Standard-Farben definieren und innerhalb der Media-Query prefers-color-scheme: dark gezielt überschrieben werden. So bleibt das Stylesheet schlank, und beide Modi nutzen dieselben semantischen Farb-Namen.
Warum reicht reine Invertierung nicht?
Weil sich Kontrast und Wahrnehmung im dunklen Modus anders verhalten. Akzent-Farben wirken auf dunklem Grund häufig zu intensiv, hellgraue Texte verlieren ihren Kontrast, Bilder mit transparenten Hintergründen werden unleserlich. Jede Paarung muss separat geprüft und gegebenenfalls angepasst werden.
Welche Barrierefreiheits-Wirkung hat der Dunkel-Modus?
Für Menschen mit Lichtempfindlichkeit, Migräne-Veranlagung oder bestimmten Seh-Einschränkungen kann der dunkle Modus körperliche Beschwerden reduzieren. Eine Website, die den System-Standard respektiert, ist für diese Gruppe deutlich angenehmer nutzbar – ein konkreter Beitrag zur visuellen Barrierefreiheit.