How Do You Implement Dark Mode in a Web App?
Learn how to build dark mode with CSS custom properties, prefers-color-scheme, and a flash-free manual theme toggle.
Expected Interview Answer
Dark mode is implemented by defining theme values as CSS custom properties, switching between a light and dark set of those values based on either the user’s OS preference (via the prefers-color-scheme media query) or an explicit user toggle, and persisting the chosen preference so it survives reloads without a flash of the wrong theme.
The core technique is to define semantic custom properties on :root, such as --color-bg and --color-text, and reference them everywhere in your CSS instead of hardcoding colors; a dark theme is then just a second block of overridden values, either scoped to @media (prefers-color-scheme: dark) for automatic OS-based switching, or scoped to a [data-theme="dark"] attribute (or a .dark class) on the html element for a manual, user-controlled toggle. Combining both approaches — defaulting to the media query but letting an explicit data-theme attribute override it — gives you system-aware theming with a manual override option, which is the pattern most production apps use. The tricky part is avoiding a flash of incorrect theme (FOIT/FOUC-style flash) on page load: because the theme choice is usually stored in localStorage, and localStorage is only accessible after JavaScript runs, you need to read the stored preference and set the data-theme attribute in a synchronous, render-blocking inline script placed in the document head before any stylesheet paints, rather than in a deferred script or a React effect that runs after first paint. Accessibility also matters: dark mode is not simply inverted colors, since pure white text on pure black can cause halation for some users, so muted off-white text and elevated (not pure black) surface colors are the accessible standard.
- Custom properties let both themes share one set of component styles
- prefers-color-scheme respects the OS setting automatically with zero JS
- A data-theme attribute layered on top allows explicit user override and persistence
- A blocking head-script read avoids the flash-of-wrong-theme on reload
AI Mentor Explanation
Dark mode is like a stadium having two full lighting rigs pre-wired to the same fixture positions — a bright day-rig and a dimmed floodlight-rig — where the ground staff decide which rig is active either automatically at sundown or by a manual switch a match official can flip. The fixtures themselves never move; only which pre-wired rig feeds them changes. Storing the last-used rig setting means tomorrow’s match starts under the same lighting choice instead of resetting to default. That shared-fixtures-different-power-source model is exactly how CSS custom properties power light and dark themes.
Step-by-Step Explanation
Step 1
Define semantic custom properties
Declare --color-bg, --color-text, etc. on :root and use them everywhere instead of hardcoded colors.
Step 2
Add a dark override block
Override the same variables inside @media (prefers-color-scheme: dark) and/or [data-theme="dark"].
Step 3
Wire up a manual toggle
A button sets data-theme on <html> and writes the choice to localStorage.
Step 4
Prevent flash of wrong theme
A synchronous inline script in <head> reads localStorage and sets data-theme before first paint.
What Interviewer Expects
- Understanding of CSS custom properties as the mechanism for swappable theme values
- Knowledge of prefers-color-scheme vs a manual data-theme/class toggle, and combining both
- Awareness of the flash-of-wrong-theme problem and the blocking inline-script fix
- Mention that dark mode needs accessible color choices, not just inverted colors
Common Mistakes
- Hardcoding colors per component instead of centralizing them in custom properties
- Reading localStorage and applying the theme only after React hydrates, causing a visible flash
- Using pure black backgrounds with pure white text, which can cause halation/eye strain
- Only supporting the OS preference with no manual override for users who want to differ from it
Best Answer (HR Friendly)
“I implement dark mode by defining all my colors as CSS variables once, then providing an override set of those same variables for dark mode, switched either by the user’s system setting or a toggle they control. The trickiest part is avoiding a flash of the wrong theme on page load, which I solve with a small script in the page head that sets the theme before anything renders.”
Code Example
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #121212;
--color-text: #e6e6e6; /* off-white, not pure white */
}
}
/* explicit user toggle overrides the media query */
[data-theme="dark"] {
--color-bg: #121212;
--color-text: #e6e6e6;
}
body {
background: var(--color-bg);
color: var(--color-text);
}<script>
(function () {
var stored = localStorage.getItem('theme')
if (stored) {
document.documentElement.setAttribute('data-theme', stored)
}
})()
</script>Follow-up Questions
- How would you avoid a flash of the wrong theme on first page load?
- How do you combine prefers-color-scheme with a manual user toggle?
- Why should dark surfaces avoid pure black and text avoid pure white?
- How would you theme SVGs or images differently between light and dark mode?
MCQ Practice
1. What CSS mechanism is typically used to make theme values swappable between light and dark?
Custom properties defined once and overridden per theme let all components share the same variable references.
2. Why does theme detection need to run in a blocking inline script in <head>, not a deferred script?
Applying the theme before the browser paints avoids a flash where the wrong theme briefly renders before switching.
3. Why is pure black background with pure white text discouraged in dark mode design?
High-contrast pure black/white combinations can be visually harsh; accessible dark themes favor off-white text and elevated dark surfaces.
Flash Cards
What powers swappable theme colors in CSS? — CSS custom properties overridden per theme block.
What media query detects OS dark mode preference? — prefers-color-scheme: dark
How do you avoid a flash of wrong theme? — Set the theme via a blocking inline script in <head> before first paint.
Why avoid pure black/white in dark mode? — Accessibility — it can cause halation; muted off-white/elevated dark surfaces are preferred.