Prefers-Color-Scheme and Prefers-Reduced-Motion
Respect user system preferences for dark mode and reduced motion animations.
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;
}
}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