Dark Mode Design — More Than Just Inverting Colors

## Dark Mode Goes Mainstream macOS Mojave, iOS 13, Android 10, and Windows 10 all added system-wide dark modes in 2019. Users expect websites to support it. But implementing dark mode properly is harder than it looks. ### Don't Just Invert The most common mistake: swapping black and white. Do that and you get: - Blinding white text on pure black backgrounds - Images that look washed out - Shadows that make no sense (dark shadow on dark background?) - Colored elements with insufficient contrast ### The Right Way **Use dark gray, not pure black.** #121212 or #1a1a2e instead of #000000. Pure black on OLED screens causes a "haloing" effect where white text appears to bleed into the black background. **Reduce text brightness.** Full white (#FFFFFF) on dark gray is harsh and causes eye strain. Use off-white (#E0E0E0 or rgba(255,255,255,0.87)) for body text. Reserve pure white for headings and emphasis. **Rethink elevation and shadows.** In light mode, shadows indicate depth (darker = further from surface). In dark mode, lighter surfaces indicate elevation. Use lighter background shades instead of shadows for cards and overlays. **Test all colored elements.** That blue link (#2563EB) that looks great on white may be invisible on dark gray. Increase saturation or lighten colored elements for dark backgrounds. **Handle images carefully.** Photos with white backgrounds look like floating rectangles in dark mode. Consider adding subtle rounded corners and reduced brightness to images in dark mode. ### CSS Implementation CSS makes dark mode straightforward: prefers-color-scheme: dark media queries detect the user's system preference. WordPress block themes can define dark color palettes in theme.json. ### Why It Matters Dark mode isn't a trend — it's an accessibility feature. Users with light sensitivity, migraine disorders, or who work in low-light environments depend on it. Supporting dark mode is supporting your users.