Intermediate LevelCSS & Modern Layouts
How do you implement dark mode using CSS prefers-color-scheme?
❓ Interview Prompt: Explain the prefers-color-scheme media query and CSS variable-based theme switching.
prefers-color-scheme detects the user's OS-level color scheme preference:
Strategy: CSS Variables + Media Query
1
Define light theme variables on
:root.2
Override with dark theme variables inside
@media (prefers-color-scheme: dark).3
All components reference variables, automatically switching themes.
Benefits:
•
Zero JavaScript required for OS-preference themes.
•
Instant theme switching without FOUC (Flash of Unstyled Content).
•
Can be combined with a manual toggle using a class-based override.
Code Implementation Example
css
:root {
--bg: #f5edf0;
--text: #3d2c2e;
--muted: #886f68;
--surface: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #e5e5e5;
--muted: #999;
--surface: #2a2a2a;
}
}
body {
background: var(--bg);
color: var(--text);
}💡Automatic OS-based dark mode with CSS variables.
🎯 Interview Key Takeaway
Use CSS variables on :root combined with prefers-color-scheme for zero-JavaScript automatic dark mode.
#Dark Mode#Theming#Color Scheme#Intermediate
Back to all CSS & Modern Layouts Questions→