Modern dark mode: `prefers-color-scheme` and theming

Implement robust dark mode with CSS tokens, system preference support and manual override without breaking accessibility.

📘 Theory

Change variables, not entire components.

Define a small token set: background, surface, text and accent. Everything else in the visual system should be built on top of those tokens.

Then you can activate dark mode with a media query or with a `data-theme` attribute on the root element.

Automatic support for people who already use dark mode at the OS level.

`@media (prefers-color-scheme: dark)` lets you adapt styles when the operating system is already in dark mode.

If you offer a manual toggle, the user choice should take priority over the automatic preference.

Example Demo: themed card The component uses only tokens and does not depend on hard-coded light or dark rules.

⌄

Challenge Challenge: manual override Activate a dark palette with `[data-theme='dark']`.

⌄

Test

Check your knowledge with a test about CSS.

Course resources 78