Detecting System Color Scheme
Read the user's OS dark mode preference with prefers-color-scheme and update React state when it changes.
The prefers-color-scheme Media Query
The prefers-color-scheme CSS media query detects whether the user has configured their operating system to use a dark or light color theme. It accepts two values: dark and light. This preference is set at the OS level in system settings, not in the browser.
CSS Dark Mode via Media Query
You can apply dark styles purely in CSS using @media (prefers-color-scheme: dark) { ... }. Inside this block, you override colors, backgrounds, and borders to suit a dark palette. This approach requires no JavaScript and works even before React mounts.
All lessons in this course
- Detecting System Color Scheme
- CSS Variables for Theme Switching
- React Context for Theme State
- Persisting Theme and Preventing Flash