Should I design light or dark mode first?

Design light mode first (it is the web default), then derive dark mode by adjusting your token values. Starting with dark and going to light is harder because dark mode has more color constraints.

How do I handle images in dark mode?

Reduce image brightness slightly (filter: brightness(0.9)) to prevent bright images from being jarring. For decorative images, consider providing dark-mode-specific alternatives.

What about user preference persistence?

Store the toggle state in localStorage. On page load, apply the stored theme before rendering to avoid a flash of the wrong theme.

Does dark mode save battery?

On OLED screens, yes. Dark pixels are literally turned off, reducing power consumption by up to 60%. On LCD screens, the savings are negligible.

How to Build CSS Dark Mode (2026)

🌙

Try Dark Mode Generator

Free, no signup →