# Sun Moon Theme Toggle

> A sun and moon theme toggle with a sky-arc swap. The moon starts slow, then swoops off to the lower left as the sun pops up from the lower right; dark mode plays it in reverse, and clicking mid-flight rewinds it. Toggles the shadcn .dark class while the page colors fade over the same duration, follows theme changes made elsewhere, can persist to localStorage, and respects reduced motion. From the CCgather header.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Theme Toggle, Toggle, Dark, Animation, Micro Interaction
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/sun-moon-theme-toggle

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/sun-moon-theme-toggle?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/theme-toggle.md