Was ist prefers-color-scheme?

prefers-color-scheme ist ein CSS-Medienmerkmal, das Websites mitteilt, ob du ein dunkles oder helles Design bevorzugst. Browser übernehmen diese Einstellung aus dem Dunkelmodus deines Systems unter Windows, macOS, Linux, Android oder iOS. Websites passen ihre Farben dann mit @media (prefers-color-scheme: dark) in CSS oder window.matchMedia("(prefers-color-scheme: dark)") in JavaScript an. Wenn eine Website hell bleibt, obwohl dein System auf Dunkelmodus eingestellt ist, solltest du zuerst prüfen, was dein Browser tatsächlich meldet.

Toolbeschreibung

Dieses Tool zeigt dein Systemdesign groß und deutlich an: Dunkel mit einem Mond oder Hell mit einer Sonne. Es fragt deinen Browser ab, ob prefers-color-scheme: dark zutrifft, und reagiert auf Änderungen. Wenn du also in den Geräteeinstellungen zwischen dunklem und hellem Modus wechselst, wird das Ergebnis sofort und ohne Neuladen aktualisiert. Alles, was nicht als dunkel gemeldet wird, wird als Hell angezeigt.

Das Ergebnis entspricht dem, was dein Browser Websites mitteilt – und das ist nicht immer dieselbe Einstellung wie die deines Systems. Firefox hat beispielsweise eine Einstellung für das Erscheinungsbild von Websites, mit der alle Websites hell oder dunkel dargestellt werden können, unabhängig von der Systemeinstellung.

Funktionen

  • Zeigt auf einen Blick an, ob der Modus Dunkel oder Hell ist
  • Aktualisiert sich sofort, wenn du das Systemdesign änderst
  • Läuft in deinem Browser und muss nicht installiert werden