Sun Moon Dark Mode Theme Toggle

Animated dark mode toggle for React and Tailwind CSS (shadcn/ui): a sun and moon swap inside a tiny sky. It is built to turn a utility switch into a small moment of delight: the sun and moon show the current mode at a glance, and the slow, rewindable motion invites people to flip it just to watch. The moon starts slow, then swoops off to the lower left while a starry night cross-fades into a blue day and the sun pops up from the lower right; dark mode plays it in reverse, and clicking mid-flight rewinds it. Toggles the .dark class while the page colors fade over the same duration, syncs with other toggles, persists to localStorage, respects reduced motion.

React + Tailwind CSS · Texte publié par la source. Les références et réglages peuvent être nécessaires ; le résultat identique n’est pas garanti.