prefers-color-scheme ist die Abfrage, über die eine Seite erfährt, ob das Gerät auf hell oder dunkel steht.
- prefers-color-scheme
Abfrage, über die eine Seite erfährt, ob der Nutzer sein System auf hell oder dunkel gestellt hat.
Beispiel: „Die Abfrage prefers-color-scheme steht in einer Media Query.“
Der kurze Weg
:root {
--grund: #ffffff;
--schrift: #001c44;
}
@media (prefers-color-scheme: dark) {
:root {
--grund: #0e1012;
--schrift: #e6e6e6;
}
}Über CSS-Variablen genügt es, die Werte umzuschalten; das übrige Stylesheet bleibt unberührt. Das ist der Grund, warum Farben von Anfang an in Variablen gehören.
Worauf zu achten ist
Reines Weiß auf reinem Schwarz blendet; gedämpfte Werte sind angenehmer. Bilder und Logos brauchen oft eine zweite Fassung, und Schatten wirken auf dunklem Grund kaum. Wer zusätzlich einen Schalter anbietet, muss die Wahl des Nutzers über die Systemeinstellung stellen.