Grid CanyonISSUE #24 of 27

media queries · prefers-color-scheme

FlexboVSThe Float Phantom

Flexbo saysThe prefers-color-scheme media query detects the user’s light/dark preference.

@media (prefers-color-scheme: dark) matches when the OS is in dark mode, letting you ship both themes automatically. Define colors as variables and flip them inside the query. Pair with the color-scheme property so native controls match too.

Power-ups you unlock

@media (prefers-color-scheme: dark|light)
Flip CSS variables inside the query
Add color-scheme to theme native controls
Respects the OS setting automatically

The Float Phantom attacks — common mistakes

Hardcoding one theme and ignoring the preference
Forgetting color-scheme so form controls clash
Low contrast in one of the two themes

Boss battleDefine light defaults, then a dark theme inside prefers-color-scheme using variables.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>:root{--bg:#f5f0ff;--fg:#1a1133}@media(prefers-color-scheme:dark){:root{--bg:#06040d;--fg:#e6e0ff}}body{background:var(--bg);color:var(--fg);padding:20px}</style></head><body><h1>follows your OS theme</h1></body></html>

▶ Open the interactive comic issue

‹ Media Queries · Screen Sizes Media Queries · Prefers-Reduced-Motion ›