Registrering af systemets farveskema

CSS-medieforespørgslen prefers-color-scheme registrerer, om brugeren har konfigureret sit operativsystem til at bruge et mørkt eller lyst farvetema. Den accepterer to værdier: dark og light. Denne indstilling angives på operativsystemniveau i systemindstillingerne, ikke i browseren.

Du kan anvende mørke typografier udelukkende i CSS ved hjælp af @media (prefers-color-scheme: dark) { ... }. Inde i denne blok tilsidesætter du farver, baggrunde og kanter, så de passer til en mørk palet. Denne tilgang kræver ingen JavaScript og fungerer, selv før React monteres.

I JavaScript returnerer window.matchMedia('(prefers-color-scheme: dark)') et MediaQueryList-objekt. Du kan bruge det til programmatisk at læse den aktuelle systemindstilling i React-hooks eller hændelseshåndterere. Det er bindeleddet mellem CSS-medieforespørgsler og din JS-logik.

Objektet MediaQueryList har egenskaben matches, som returnerer en boolesk værdi. Hvis matches er true, er systemet i mørk tilstand; hvis false, er det i lys tilstand. Du læser typisk værdien én gang ved montering for at initialisere tilstanden for dit tema.

Brugere kan til enhver tid ændre operativsystemets farveskema. Hvis du vil reagere dynamisk, skal du kalde mediaQuery.addEventListener('change', handler), hvor handler modtager den opdaterede MediaQueryListEvent. Hændelsesobjektet har også en boolesk matches-værdi, der afspejler den nye indstilling.

En ren tilgang er at oprette et brugerdefineret hook ved hjælp af useSyncExternalStore. Hooket abonnerer på mediaQuery.addEventListener og leverer en snapshot-funktion, der returnerer mediaQuery.matches. Det holder hooket synkroniseret med browserens eksterne API uden manuel tilstandshåndtering.

Når din komponent afmonteres, skal du fjerne hændelseslytteren for at undgå hukommelseslækager. I en useEffect-oprydningsfunktion skal du kalde mediaQuery.removeEventListener('change', handler). Med useSyncExternalStore skal abonnementsfunktionen returnere en afmeldingsfunktion, der gør det samme.

Systemindstillingen er det, operativsystemet rapporterer. Men brugere vil ofte tilsidesætte appens tema uafhængigt, f.eks. beholde appen lys, mens operativsystemet er i mørk tilstand. Din arkitektur bør skelne mellem systemets standardindstilling og en eksplicit brugertilsidesættelse, der gemmes i localStorage.

Chrome DevTools lader dig emulere indstillinger for farveskemaet uden at ændre operativsystemets indstillinger. Åbn DevTools, gå til fanen Rendering, og find rullemenuen "Emulate CSS media feature prefers-color-scheme". Det er uvurderligt, når du hurtigt vil teste begge temaer under udviklingen.

En god implementering af mørketilstand læser systemindstillingen som standardudgangspunkt og anvender den med det samme. Det viser respekt for brugerens tilgængelighedsindstilling. Først når brugeren eksplicit skifter temaet i din app, bør du gemme og bruge en anden tilsidesættelse.

På serveren findes window.matchMedia ikke. Hvis du gengiver på serveren, skal du kontrollere med typeof window !== 'undefined', før du kalder matchMedia. I SSR-apps bør du i stedet læse brugerens indstilling fra en cookie eller en HTTP-header for at undgå uoverensstemmelser ved hydrering.

Medieforespørgslen prefers-color-scheme giver adgang til operativsystemets farveindstilling i både CSS og JavaScript. Brug window.matchMedia til at læse ændringer og lytte efter dem, ryd altid op efter hændelseslyttere, og skeln mellem systemets standardindstillinger og brugerens tilsidesættelser. Emulering i Chrome DevTools gør det hurtigere at teste begge temaer.