prefers-color-scheme-mediavraag
Detecteer de voorkeur van de gebruiker voor de donkere of lichte systeemmodus met de prefers-color-scheme-mediavraag.
prefers-color-scheme-mediavraag is een gratis CSS Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Waarom automatisch donkere modus?
Veel gebruikers schakelen op besturingssysteemniveau de donkere modus in voor comfort, een langere batterijduur (OLED-schermen) of toegankelijkheid. De mediaquery prefers-color-scheme detecteert deze voorkeur en laat uw site zich automatisch aanpassen.
Querywaarden
Twee waarden:
light— de gebruiker geeft de voorkeur aan een licht kleurenschema (of heeft geen voorkeur)dark— de gebruiker geeft de voorkeur aan de donkere modus
<p>This page respects your OS dark mode setting.</p>
Donkere modus als mobiele basis
Als de meeste van je gebruikers OLED-mobiele apparaten gebruiken, overweeg dan om donker als basisstijl te nemen:
<p>Dark by default; switches to light in light mode.</p>
Aanpak met CSS-variabelen
De schoonste implementatie — definieer per kleurenschema een set tokens:
<div class="card">Themed card using CSS variables</div>
Afbeeldingen in donkere modus
Verlaag de helderheid van afbeeldingen in de donkere modus om fel oplichtende afbeeldingen te voorkomen:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />
Detectie in JavaScript
Controleer de voorkeur voor de donkere modus in JavaScript voor dynamisch gedrag:
<p id="theme-status">Checking...</p>
<script>
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
});
</script>
Testen in DevTools
Ga in Chrome DevTools naar het tabblad Rendering → CSS prefers-color-scheme emuleren. Schakel tussen licht en donker zonder de instellingen van het besturingssysteem te wijzigen. In Firefox: DevTools → tabblad Inspector → menu met het oogpictogram.
Kleurprincipes voor de donkere modus
Een effectieve donkere modus:
- Gebruik donkergrijs (geen puur zwart) voor achtergronden — dit vermindert vermoeide ogen
- Beperk diepteschaduwen — gebruik lichtere achtergrondtinten voor hogere oppervlakken
- Maak randkleuren lichter zodat ze beter zichtbaar zijn
- Controleer de contrastverhoudingen van tekst — mogelijk zijn andere verhoudingen nodig
Antipatroon: kleuren inverteren
Inverteer nooit simpelweg alle kleuren met filter: invert(1) voor de donkere modus. Afbeeldingen en pictogrammen krijgen dan bizarre kleuren. Gebruik de juiste tokens voor de donkere modus, met geschikte kleuren voor elk element.
Prestaties: flitsen voorkomen
Als je thema's wisselt met JavaScript, voorkom dan een flits van een ongestileerd thema (FOUT) door de themaklasse synchroon toe te passen op <html> in een <script>-tag in <head>, voordat de pagina wordt weergegeven.
Metatag voor themakleur
Werk de kleur van de browserinterface (mobiele adresbalk, taakschakelaar) bij zodat deze overeenkomt met het donkere thema:
<pre class="code-sample"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a2e"></pre>
Korte controle
Welke waarde voor de mediaquery gebruik je om stijlen voor de donkere modus toe te passen wanneer het besturingssysteem op de donkere modus is ingesteld?
Samenvatting
prefers-color-scheme: dark detecteert de voorkeur van het besturingssysteem voor de donkere modus. Implementeer automatische donkere modus met CSS-variabelen die tokenwaarden binnen de mediaquery verwisselen. Verlaag de helderheid van afbeeldingen in de donkere modus. Test in DevTools. Werk de metatag voor de browserkleur theme-color bij voor een complete mobiele ervaring.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “prefers-color-scheme-mediavraag” gratis?
Ja — de volledige tekst van “prefers-color-scheme-mediavraag” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “prefers-color-scheme-mediavraag”?
Detecteer de voorkeur van de gebruiker voor de donkere of lichte systeemmodus met de prefers-color-scheme-mediavraag. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “prefers-color-scheme-mediavraag”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- prefers-color-scheme-mediavraag
- CSS-variabelen voor thema's
- Eigenschap color-scheme
- Automatische en handmatige schakelaar voor donkere modus