Designing for Dark Mode

Dark mode has become a must-have feature for modern websites. Here are some tips for getting it right.

Use Semantic Colors

Instead of hardcoding colors, define semantic tokens like --color-text-primary and --color-bg-surface. This makes it trivial to swap palettes.

Respect User Preferences

Always check prefers-color-scheme first, then let users override with a toggle. Store the preference in localStorage so it persists.

Don’t Just Invert

Simply inverting colors rarely looks good. Reduce contrast slightly in dark mode — pure white on pure black is harsh on the eyes. Aim for soft grays and muted accents.