Meridian DocsRecipe: Theme Picker

Theme Picker UI

A live theme selector that lets users preview and apply color schemes instantly. Built with CSS custom properties and a compact palette grid.

Live Preview

How It Works

Define a set of CSS custom properties on :root. Each theme button updates those properties via a data attribute or class toggle on the document element. All components reference the variables, so the entire UI shifts instantly.

Key Details

  • Store the active theme in localStorage for persistence.
  • Apply a transition on color-related properties for smooth swaps.
  • Fall back to system preference via prefers-color-scheme when no theme is saved.
← Back to DocsMore Recipes