P.

Theme Systems That Stay Out of the Way

How to make light and dark mode feel like one coherent product.

A useful theme system should feel native, not theatrical. Light mode and dark mode are not two brand personalities. They are two reading environments.

That distinction matters because many interfaces overcorrect when they add dark mode. Contrast becomes harsh, accent colors drift, and components start behaving like they were designed for another product. The better approach is to preserve hierarchy first and adjust atmosphere second.

In Astro themes, CSS variables make this work manageable. The tokens should express roles like surface, text, border, and accent rather than hardcoded colors. Once those roles are stable, theme switching becomes a system instead of a one-off styling exercise.

Users rarely praise a theme toggle directly. They notice when it feels consistent and when it respects the device preference they already set.