Icon-only sun<->moon light/dark toggle with an animated morph — the two-theme counterpart to ThemeSelector
A single icon button that flips a bindable theme between a light and a dark theme —
no visible text, no dropdown. The glyphs morph with transform + opacity on the
motion tokens, go instant under prefers-reduced-motion, and flatten
their spring on data-motion="calm". Storage stays with the consumer.
lightacme-light| Prop | Type | Default | Description |
|---|---|---|---|
theme | string | "light" (bindable) | Current theme name; flipped between light/dark on click |
lightTheme | string | "light" | Theme name considered light (sun shown) |
darkTheme | string | "dark" | Theme name considered dark (moon shown) |
onchange | (theme: string) => void | - | Fired after the bound theme flips |
size | "sm" | "md" | "lg" | "md" | Hit target: 40 / 44 / 48px |