Why Dark Mode Requires a Dual-Design Approach from the Start

Dark mode done properly is not a stylesheet that flips white to black. It's a second, separately-designed surface hierarchy — its own contrast decisions, its own shadow language, its own elevation rules. When the token system is built for both from day one, every component renders correctly in both with a single attribute swap. When it's bolted on later, surfaces bleed the wrong tint, shadows compound in the wrong direction, and the dark theme reads as an afterthought.

I learned this the hard way on a SaaS dashboard in 2024. I shipped v1 in light mode, then added a dark theme the next sprint by flipping a handful of CSS custom properties. The pages looked OK in isolation. The moment components stacked — a card on a sheet on a modal on the page — the depth cues collapsed.

---

This is an excerpt. Read the full post at otf-kit.dev/blog/dark-mode-is-not-a-checkbox — full-stack kits your AI coding agent can actually ship to production. Browse the kits →