Designing for Both Themes from Day One

The fastest way to end up with a muddy dark mode is to design in light mode first and invert colors afterward. Contrast ratios that worked at AA in daylight often collapse once the background goes dark.

Instead, define every color as a semantic token — background, surface, text, text-muted, border, accent — and give each token two values from the start. Test both palettes against WCAG AA before writing a single component.

The accent carries the identity

Keep your accent hue consistent between themes and let lightness do the work: a saturated teal at high lightness for dark backgrounds, a deeper teal for light backgrounds. The brand stays recognizable in both modes.