Prefers-Color-Scheme och Prefers-Reduced-Motion
Respektera användarens systeminställningar för mörkt läge och animeringar med reducerad rörelse.
Prefers-Color-Scheme och Prefers-Reduced-Motion är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 3 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.
Mediefunktioner för användarpreferenser
CSS kan läsa av användarens systempreferenser utöver skärmstorleken. Det gör det möjligt att aktivera mörkt läge automatiskt och använda animationer som tar hänsyn till tillgänglighet utan att användaren behöver interagera med webbplatsen.
prefers-color-scheme
Identifierar om användaren har ställt in ljust eller mörkt läge i operativsystemet:
<p>This page follows your OS color-scheme preference.</p>
Implementera automatiskt mörkt läge
Den renaste lösningen använder CSS-variabler som byter värden utifrån preferensen:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
Vissa användare blir illamående eller känner obehag av animationer. Mediefunktionen prefers-reduced-motion: reduce identifierar denna tillgänglighetspreferens.
<div class="box spun"></div>
Respektera rörelsepreferenser
I stället för att stänga av alla animationer kan du erbjuda alternativa, subtila animationer:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
Identifierar om användaren föredrar högre kontrast (av tillgänglighetsskäl) eller lägre kontrast. Anpassa färgvalen därefter:
<p>Contrast-aware text</p>
prefers-reduced-transparency
Vissa användare med synnedsättning föredrar mindre transparens. Minska effekter som bygger på backdrop-filter och opacitet:
<div class="glass-card">Glass card</div>
Åtkomst till preferenser från JavaScript
Fråga efter dessa preferenser från JavaScript med window.matchMedia():
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
Systempreferens och manuellt åsidosättande
Respektera systempreferensen som standard och låt användaren åsidosätta den med en växlingsknapp. Spara åsidosättandet i localStorage och lägg till en klass på <html>:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
Identifierar om användaren har aktiverat datasparläge. Leverera mindre bilder eller hoppa över resurser som inte är nödvändiga:
<div class="hero">Hero banner</div>
Testa i DevTools
I Chrome DevTools kan fliken Rendering simulera mörkt läge, reducerad rörelse och andra mediefunktioner för preferenser utan att du ändrar inställningarna i operativsystemet.
Snabb kontroll
Vilket är det bästa sättet att implementera automatiskt mörkt läge som även stöder en manuell växlingsknapp?
Sammanfattning
prefers-color-scheme möjliggör automatiskt mörkt läge. prefers-reduced-motion bör stänga av eller förenkla animationer av tillgänglighetsskäl. Implementera båda med CSS-variabler för ren och lättunderhållen kod. Erbjud alltid ett manuellt åsidosättande så att användaren kan styra sin preferens oberoende av operativsystemet.
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 ”Prefers-Color-Scheme och Prefers-Reduced-Motion” gratis?
Ja – hela texten till ”Prefers-Color-Scheme och Prefers-Reduced-Motion” 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 ”Prefers-Color-Scheme och Prefers-Reduced-Motion”?
Respektera användarens systeminställningar för mörkt läge och animeringar med reducerad rörelse. 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 3 av 4.
Hur lång tid tar lektionen ”Prefers-Color-Scheme och Prefers-Reduced-Motion”?
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
- Syntax och vanliga brytpunkter
- Bredd-, höjd- och orienteringsfrågor
- Prefers-Color-Scheme och Prefers-Reduced-Motion
- Kombinera flera media queries