Interview Question

How do you implement dark mode?

Dark mode swaps an accessible color system, ideally respecting user preference.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

Dark mode is implemented by defining a dark color palette and applying it through preference or user choice. • prefers-color-scheme can supply the initial system-based theme. • Custom properties keep theme values consistent. • Colors must retain readable contrast and visible focus indicators.

💡 Simple Example

:root { --bg: white; --text: #111; } @media (prefers-color-scheme: dark) { :root { --bg: #111; --text: #eee; } } body { background: var(--bg); color: var(--text); }

⚡ Quick Revision

Dark mode swaps an accessible color system, ideally respecting user preference.