# User preference media queries — Responsive and Mobile-First Web Design

Source: https://www.geekswithgeeks.com/en/responsive-design/user-preference-queries

> Respect user settings with prefers-color-scheme and prefers-reduced-motion, and size full-height layouts with dvh units.

## 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.

```css
: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

**Quiz:** Which media feature detects a user who wants less animation?

- [x] prefers-reduced-motion
- [ ] prefers-color-scheme
- [ ] orientation
- [ ] hover

*Answer:* prefers-reduced-motion. prefers-reduced-motion: reduce reflects the OS reduce-motion setting.