Dark Mode & prefers-color-scheme

Respect the user's OS theme so they get light OR dark interface.

Reading the setting

css
@media (prefers-color-scheme: dark) {
  :root { - bg: #121212; - text: #f5f5f5; - card: #1e1e1e;
  }
}
:root { - bg: #ffffff; - text: #111111; - card: #fafafa;
}
body {
  background: var( - bg);
  color: var( - text);
}

Order the default (light) variables first, then override inside the media query. Cascade sibling order matters, later overrides win.

The 4 core variables

- bg, - text, - card, - border. Enough for 95% of apps!

Enhance with color-scheme

color-scheme: dark makes native UI (scrollbars, forms) match:

css
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

Test it

• Toggle in devtools (rendering / emulate), switch Media: prefers-color-scheme.
• Make sure BOTH themes pass contrast.

TL;DR

• prefers-color-scheme reads OS light/dark setting.
• Swap CSS variables in a media query for instant theming.
• Add color-scheme so widgets follow.
• Test both themes in DevTools.