Dark ModeDone Right

Most dark modes are lazy inversions. Swap white for black, darken the grays, call it done. The result is flat, harsh, and loses the hierarchy that made the light theme work. Dark mode done right is a complete redesign.

Hierarchy in the Dark

In light mode, you create hierarchy by going from white to light gray to medium gray. In dark mode, you go from near-black to dark gray to medium gray. The direction reverses. The relationships between surfaces change. If you just invert, you get a theme where elevated elements look recessed.

Persephonie's dark theme was built from scratch. Every surface has a specific luminance value chosen to maintain the same visual hierarchy as the light theme. Cards float above backgrounds. Active states pop. Nothing is flat.

Dark mode isn't the absence of light. It's the careful orchestration of darkness.

Reducing Strain

True black backgrounds cause halation, a glow effect around white text that strains the eyes. We use near-black instead. Our darkest surface is never pure #000000. This tiny difference dramatically reduces eye fatigue during long sessions.

• No pure black backgrounds, always slightly elevated
• Text at 87% opacity, not pure white
• Accent colors desaturated slightly for dark contexts
• Borders more subtle, using transparency instead of solid colors

The Circle Reveal

Theme switching in Persephonie uses the View Transitions API to create a circle-reveal animation. The new theme expands from the toggle button like a ripple. It's not just a state change. It's a moment. Press and hold for a menu with Light, Dark, and System options. Premium is in the details.