Light Mode with prefers-color-scheme
Apply light mode styles when the user prefers a light color theme. Useful for dark-first design systems that need a light override.
User Preferences
Detailed Explanation
Light Mode Override with prefers-color-scheme
If your default stylesheet targets dark mode (dark-first design), you can use prefers-color-scheme: light to provide a light alternative for users who prefer it.
The Query
@media (prefers-color-scheme: light) {
:root {
--bg: #ffffff;
--text: #18181b;
--border: #e4e4e7;
}
}
Dark-First vs Light-First
Most design systems default to light mode and add dark overrides. However, some developer tools and code editors default to dark mode. If your site primarily serves developers, a dark-first approach may feel more natural.
Complete Pattern
/* Default: dark */
:root {
--bg: #0a0a0b;
--text: #fafafa;
--primary: #3b82f6;
}
/* Override: light preference */
@media (prefers-color-scheme: light) {
:root {
--bg: #ffffff;
--text: #18181b;
--primary: #2563eb;
}
}
Considerations
- Ensure sufficient color contrast in both modes (minimum 4.5:1 for WCAG AA)
- Test images and illustrations in both themes
- Transparent PNGs may need different backgrounds per theme
- Use
color-scheme: dark light;on:rootto inform the browser about supported schemes
Use Case
Use this query in a dark-first design system where your base styles are dark and you need to provide light-themed overrides for users who have selected a light OS theme.