Vad är prefers-color-scheme?

prefers-color-scheme är en CSS-mediefunktion som talar om för webbplatser om du föredrar ett mörkt eller ljust tema. Webbläsare hämtar inställningen från systemets inställning för mörkt läge i Windows, macOS, Linux, Android eller iOS. Webbplatser byter färger med @media (prefers-color-scheme: dark) i CSS eller window.matchMedia("(prefers-color-scheme: dark)") i JavaScript. Om en webbplats förblir ljus när systemet är inställt på mörkt läge är det första du bör kontrollera vad webbläsaren faktiskt rapporterar.

Verktygsbeskrivning

Det här verktyget visar systemets tema i ett stort fält: Mörkt med en måne eller Ljust med en sol. Det frågar webbläsaren om prefers-color-scheme: dark matchar och lyssnar efter ändringar. När du växlar mellan mörkt och ljust läge i enhetens inställningar uppdateras därför resultatet direkt utan att sidan behöver läsas in igen. Allt som inte rapporteras som mörkt visas som Ljust.

Svaret visar vad webbläsaren talar om för webbplatser, vilket inte alltid motsvarar systeminställningen. Firefox har till exempel en inställning för webbplatsers utseende som kan göra alla webbplatser ljusa eller mörka, oavsett systemets inställning.

Funktioner

  • Visar Mörkt eller Ljust med en blick
  • Uppdateras direkt när du ändrar systemets tema
  • Körs i webbläsaren och kräver ingen installation