User preference media queries

Honour user settings

Media queries can read operating-system preferences. prefers-color-scheme detects light or dark mode, prefers-reduced-motion detects users who want less animation, and prefers-contrast detects a request for higher contrast.

Dark mode and reduced motion

Define colours as CSS variables, override them for dark mode and switch off non-essential motion.

:root { --bg: #fff; --text: #111; }

@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* dvh avoids the mobile browser toolbar cutting off 100vh */
.hero { min-height: 100dvh; }

Test both modes

In DevTools, open Rendering and emulate prefers-color-scheme and prefers-reduced-motion. Check contrast in both themes.

Quick check

Quick check: Which media feature detects a user who wants less animation?

• prefers-reduced-motion
• prefers-color-scheme
• orientation
• hover