Prefers-Color-Scheme and Prefers-Reduced-Motion
Respect user system preferences for dark mode and reduced motion animations.
Prefers-Color-Scheme and Prefers-Reduced-Motion is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
User Preference Media Features
CSS can query user system preferences beyond screen size. This enables automatic dark mode and accessibility-aware animations without user interaction on your site.
prefers-color-scheme
Detects whether the user has set their OS to light or dark mode:
@media (prefers-color-scheme: dark) {
body {
background: #1a1a2e;
color: #e0e0e0;
}
}
@media (prefers-color-scheme: light) {
body {
background: white;
color: #111;
}
}Implementing Auto Dark Mode
The cleanest implementation uses CSS variables that swap values based on the preference:
:root {
--bg: white;
--text: #111;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a2e;
--text: #e0e0e0;
}
}
body {
background: var(--bg);
color: var(--text);
}prefers-reduced-motion
Some users experience nausea or discomfort from animation. The prefers-reduced-motion: reduce media feature detects this accessibility preference.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Respecting Motion Preferences
Instead of killing all animation, provide alternative subtle animations:
.card {
transition: transform 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.card { transition: opacity 150ms; }
/* fade instead of transform */
}prefers-contrast
Detects if the user prefers higher contrast (for accessibility) or lower contrast. Adjust color choices accordingly:
@media (prefers-contrast: more) {
:root {
--text: #000;
--bg: #fff;
}
}prefers-reduced-transparency
Some users with visual impairments prefer less transparency. Reduce backdrop-filter and opacity-based effects:
@media (prefers-reduced-transparency: reduce) {
.glass-card {
background: white;
backdrop-filter: none;
}
}JavaScript Access to Preferences
Query these preferences from JavaScript using window.matchMedia():
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.body.classList.toggle('dark-mode', e.matches);
});System Preference + Manual Override
Respect the system preference by default and let users override with a toggle. Store the override in localStorage and apply a class to <html>:
html.dark { /* manual dark override */ }
@media (prefers-color-scheme: dark) {
html:not(.light) { /* auto dark */ }
}prefers-reduced-data
Detects if the user has enabled data-saving mode. Serve smaller images or skip non-essential resources:
@media (prefers-reduced-data: reduce) {
.hero {
background-image: none; /* no big hero image */
}
}Testing in DevTools
In Chrome DevTools, the Rendering tab lets you emulate dark mode, reduced motion, and other preference media features without changing your OS settings.
Quick Check
What is the best way to implement auto dark mode that can also support a manual user toggle?
Recap
prefers-color-scheme enables auto dark mode. prefers-reduced-motion should disable or simplify animations for accessibility. Implement both using CSS variables for clean, maintainable code. Always provide a manual override so users can control their preference independently from the OS.
Frequently asked questions
Is the “Prefers-Color-Scheme and Prefers-Reduced-Motion” lesson free?
Yes — the full text of “Prefers-Color-Scheme and Prefers-Reduced-Motion” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Prefers-Color-Scheme and Prefers-Reduced-Motion”?
Respect user system preferences for dark mode and reduced motion animations. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Prefers-Color-Scheme and Prefers-Reduced-Motion” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Syntax and Common Breakpoints
- Width Height and Orientation Queries
- Prefers-Color-Scheme and Prefers-Reduced-Motion
- Combining Multiple Media Queries