Wat is prefers-color-scheme?

prefers-color-scheme is de CSS-mediafunctie die websites vertelt of je een donker of licht thema wilt. Browsers halen deze voorkeur op uit de instelling voor de donkere modus van je systeem op Windows, macOS, Linux, Android of iOS. Websites passen hun kleuren aan met @media (prefers-color-scheme: dark) in CSS of window.matchMedia("(prefers-color-scheme: dark)") in JavaScript. Als een website licht blijft terwijl je systeem op donker staat, controleer dan eerst wat je browser daadwerkelijk doorgeeft.

Beschrijving van de tool

Deze tool toont het thema van je systeem in één groot blok: Donker met een maan of Licht met een zon. De tool vraagt je browser of prefers-color-scheme: dark overeenkomt met de huidige instelling en houdt wijzigingen bij. Zo wordt het resultaat direct bijgewerkt wanneer je in de instellingen van je apparaat schakelt tussen de donkere en lichte modus, zonder dat de pagina opnieuw hoeft te worden geladen. Alles wat niet als donker wordt doorgegeven, wordt als Licht weergegeven.

Het resultaat is wat je browser aan websites doorgeeft, en dat komt niet altijd overeen met de instelling van je systeem. Firefox heeft bijvoorbeeld een instelling voor de weergave van websites, waarmee je alle websites licht of donker kunt maken, ongeacht de instelling van je systeem.

Functies

  • Toont in één oogopslag Donker of Licht
  • Wordt direct bijgewerkt wanneer je het thema van je systeem wijzigt
  • Werkt in je browser; je hoeft niets te installeren