Dark Mode Toggle

A sun and moon switch recolors the whole page instantly — powered by CSS custom properties — and remembers your choice across return visits.

How it works

• 🎨
  Design

  Instant recolor

  Every surface — backgrounds, text, borders, shadows — updates atomically via CSS custom properties. Zero JS DOM writes needed.

• 💾
  Memory

  Persists on return

  The chosen theme is written to localStorage and re-applied before first paint so there's never a flash of the wrong theme.

• 🖥️
  System

  Respects OS default

  First-time visitors get the theme their operating system prefers via prefers-color-scheme, with no extra setup.

This could be your website

Half your visitors have their OS in dark mode. The other half, light. A toggle built right — OS-aware by default, zero flash on load, instant response — tells every one of them you cared. That kind of detail earns trust.