# Light and Dark Themes with prefers-color-scheme

A dark theme is the same page with new token values: you redefine the color tokens in a prefers-color-scheme media query, set color-scheme, and every component follows the reader's light or dark setting.

![Cheat sheet: Light and Dark Themes with prefers-color-scheme](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/a93917831d9a4ffaafd3412047d07868.webp)

- Category: CSS
- Level: Journeyman
- Tags: :has(), checked, color-scheme, CSS, light-dark(), prefers-color-scheme
- Updated: November 1, 2026

Source: https://www.ask-codey.com/cheat-sheets/css-dark-mode-cheat-sheet