prefers-color-scheme Media Query
Detect the user's system dark or light mode preference using the prefers-color-scheme media query.
Why Auto Dark Mode?
Many users enable dark mode at the OS level for comfort, battery life (OLED screens), or accessibility. The prefers-color-scheme media query detects this preference and lets your site adapt automatically.
Query Values
Two values:
light— user prefers a light color scheme (or no preference)dark— user prefers dark mode
@media (prefers-color-scheme: dark) {
body { background: #111; color: #eee; }
}All lessons in this course
- prefers-color-scheme Media Query
- CSS Variables for Theming
- color-scheme Property
- Automatic and Manual Dark Mode Toggle