Mediefrågan prefers-color-scheme
Identifiera användarens systeminställning för mörkt eller ljust läge med mediefrågan prefers-color-scheme.
Mediefrågan prefers-color-scheme är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Varför automatiskt mörkt läge?
Många användare aktiverar mörkt läge på operativsystemnivå för ökad komfort, bättre batteritid (på OLED-skärmar) eller av tillgänglighetsskäl. Mediafrågan prefers-color-scheme upptäcker denna inställning och låter webbplatsen anpassas automatiskt.
Frågevärden
Två värden:
light— användaren föredrar ett ljust färgschema (eller har ingen angiven inställning)dark— användaren föredrar mörkt läge
<p>This page respects your OS dark mode setting.</p>
Mörkt läge med mobile-first
Om de flesta av användarna använder mobila OLED-enheter bör Ni överväga att använda mörkt läge som grundstil:
<p>Dark by default; switches to light in light mode.</p>
Tillvägagångssätt med CSS-variabler
Den renaste implementationen är att definiera en uppsättning tokens per färgschema:
<div class="card">Themed card using CSS variables</div>
Bilder i mörkt läge
Minska bildernas ljusstyrka i mörkt läge för att undvika bilder som bländar:
<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" />
Detektering i JavaScript
Kontrollera inställningen för mörkt läge i JavaScript för dynamiskt beteende:
<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>
Testning i DevTools
I Chrome DevTools → fliken Rendering → Emulate CSS prefers-color-scheme. Växla mellan ljust och mörkt läge utan att ändra operativsystemets inställningar. I Firefox: DevTools → fliken Inspector → menyn med ögonikonen.
Färgprinciper för mörkt läge
Ett effektivt mörkt läge:
- Använd mörkgrått, inte helt svart, som bakgrund — det minskar ansträngningen för ögonen
- Minska skuggor som visar höjd — använd ljusare bakgrundstoner för ytor som ligger högre
- Justera kantfärgerna så att de blir ljusare och syns bättre
- Kontrollera textens kontrastförhållanden — andra förhållanden kan behövas
Antimönster: invertera färger
Invertera aldrig alla färger rakt av med filter: invert(1) för att skapa mörkt läge. Bilder och ikoner får då märkliga färger. Använd i stället korrekta tokens för mörkt läge, med lämpliga färger för varje element.
Prestanda: undvik flimmer
Om Ni använder JavaScript-styrt temabyte kan Ni förhindra ett Flash of Unstyled Theme (FOUT) genom att synkront tillämpa temaklassen på <html> i en <script>-tagg i <head> innan sidan renderas.
Meta theme-color
Uppdatera webbläsarens gränssnittsfärg, till exempel adressfältet på mobilen och uppgiftsväxlaren, så att den matchar det mörka temat:
<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>
Snabbkontroll
Vilket värde ska Ni använda i media queryn för att tillämpa stilar för mörkt läge när operativsystemet är inställt på mörkt läge?
Sammanfattning
prefers-color-scheme: dark identifierar operativsystemets inställning för mörkt läge. Implementera automatiskt mörkt läge med CSS-variabler som byter tokenvärden i media queryn. Minska bildernas ljusstyrka i mörkt läge. Testa i DevTools. Uppdatera webbläsarens meta-tagg för theme-color för en komplett mobilupplevelse.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Mediefrågan prefers-color-scheme” gratis?
Ja – hela texten till ”Mediefrågan prefers-color-scheme” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Mediefrågan prefers-color-scheme”?
Identifiera användarens systeminställning för mörkt eller ljust läge med mediefrågan prefers-color-scheme. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Mediefrågan prefers-color-scheme”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Mediefrågan prefers-color-scheme
- CSS-variabler för tematisering
- Egenskapen color-scheme
- Automatisk och manuell växling av mörkt läge