CSS · Layout and visual systems
How do you implement dark mode in CSS?
Short answer
Use prefers-color-scheme for the system preference, CSS custom properties for theme tokens, and the color-scheme property so native controls match. Support an explicit override when the product needs one.
A robust theme system separates color tokens from components. Components reference semantic variables such as background and text, and the theme changes those variables rather than rewriting component rules.
:root {
color-scheme: light dark;
--bg: #ffffff;
--text: #111827;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0b1120;
--text: #e5e7eb;
}
}
body {
background: var(--bg);
color: var(--text);
}What to include
- prefers-color-scheme for the operating system preference
- Custom properties for semantic color tokens
- color-scheme so form controls, scrollbars and default UI adapt
- A data attribute or class override when users can choose a theme manually
- Contrast checks for both themes, especially text on colored surfaces
- Theme-aware images and meta theme-color for browser chrome
Do not simply invert colors. Dark mode needs its own contrast and elevation decisions. Shadows, borders and surface colors often need to change more than the text color.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What does prefers-color-scheme do?
- 2Why is color-scheme useful?
- 3How do you support a manual theme toggle?
- 4Why is inverting colors a poor dark mode strategy?
Say it in the interview
I build dark mode from semantic custom properties, then switch those tokens with prefers-color-scheme or an explicit class or data attribute. I also set color-scheme so native controls and scrollbars adapt. I check contrast in both themes rather than inverting colors, because dark surfaces and borders need their own design decisions.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.