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. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
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:
<p>This page follows your OS color-scheme preference.</p>
Implementing Auto Dark Mode
The cleanest implementation uses CSS variables that swap values based on the preference:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
Some users experience nausea or discomfort from animation. The prefers-reduced-motion: reduce media feature detects this accessibility preference.
<div class="box spun"></div>
Respecting Motion Preferences
Instead of killing all animation, provide alternative subtle animations:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
Detects if the user prefers higher contrast (for accessibility) or lower contrast. Adjust color choices accordingly:
<p>Contrast-aware text</p>
prefers-reduced-transparency
Some users with visual impairments prefer less transparency. Reduce backdrop-filter and opacity-based effects:
<div class="glass-card">Glass card</div>
JavaScript Access to Preferences
Query these preferences from JavaScript using 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>
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>:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
Detects if the user has enabled data-saving mode. Serve smaller images or skip non-essential resources:
<div class="hero">Hero banner</div>
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.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
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. 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. The CSS Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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