Dark mode detecteren in JavaScript met prefers-color-scheme

Dit JavaScript-snippet detecteert of de gebruiker zijn computer op dark mode of donkere modus heeft gezet. Is dat zo, dan geeft het true terug. Een klein stukje code dat je site of applicatie meteen toegankelijker maakt voor wie liever in het donker werkt.

JavaScript Dark Mode

const isDarkMode = () =>
	globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Gebruik
isDarkMode();

Wat is dark mode of donkere modus?

Dark mode is een functie waarmee je het kleurenpalet van je apparaat op een donkerder tint zet. Veel mensen geven er de voorkeur aan omdat het de ogen minder belast en tekst op het scherm makkelijker leesbaar maakt. Donkere modus zit inmiddels op tal van apparaten: smartphones, laptops en tablets.

Werk je aan applicaties in JavaScript, dan maakt een dark mode het gebruik van je applicatie een stuk comfortabeler voor je gebruikers.

Donkere modus in- of uitschakelen

Zo zet je het donkere thema aan op de meest gangbare apparaten en applicaties, met Windows, Android, Mac en iOS:

Windows

1. Ga in het menu Start naar Instellingen en dan Persoonlijke instellingen.
2. Kies links op het scherm de optie Achtergrond. Je kunt je eigen donkere thema uploaden of er een kiezen die Windows meelevert.
3. Kies links op het scherm de optie Kleuren. Neem een kleur die prettig is voor het oog, zoals grijs, taupe of een gedempt geel of blauw (jouw keuze).
4. Test je kleurkeuze in het donkere thema door onder Kies de standaardmodus voor apps op Donker te klikken. Bevallen de gekozen kleuren toch niet, probeer dan iets anders.

Android

1. Ga naar Instellingen, dan naar Toegankelijkheid en ten slotte naar Beeldscherm.
2. Tik op Donker thema om dat toe te passen, of op Kleurinversie gebruiken.

MacOS

1. Ga naar Systeemvoorkeuren.
2. Klik op Algemeen.
3. Kies de weergave die je het beste bevalt. Er is Licht, Donker en Automatisch, dat meebeweegt met het tijdstip van de dag.

iOS

1. Ga naar Instellingen.
2. Kies Beeldscherm en helderheid.
3. Zet de donkere modus aan of uit.

Conclusie

De donkere modus maakt het je gebruikers comfortabeler, een dark mode aan je applicaties toevoegen is een pluspunt dat je niet moet onderschatten.

Zoek je meer artikelen over JavaScript en andere tips, kijk dan bij mijn JavaScript-artikelen.