Theme Toggle Effect
Copy-paste CSS for View Transitions API theme-switch animations
Rudrodip Sarker's demo page for animating light/dark switching with the View Transitions API, and the reference everyone copies for it. The whole JavaScript surface is two lines wrapping your existing switchTheme call in document.startViewTransition with a fallback; everything else is CSS on ::view-transition-old/new(root). The page demos six effects and links a plain /animations.txt containing the full CSS for each, named circle, circle-with-blur, circle-blur-top-left, polygon, polygon-gradient, gif-1 and gif-2, plus a block of easing curves. Vanilla CSS with SVG masks and clip-paths, no framework and no package.
Fetch /animations.txt and paste one named block into global CSS rather than pulling a motion library — this needs zero dependencies and works with next-themes, a class toggle, or anything else, because it only hooks the existing switch function. Use circle-blur-top-left when the toggle sits in a corner nav and circle-with-blur when it sits centre; set the mask origin to the button's coordinates if you want the wipe to start from the cursor. Two real cautions: the repo has no LICENSE file at all, so treat it as reference to reimplement rather than code you can safely vendor into a client product, and none of the snippets guard prefers-reduced-motion, so add that media query yourself.
Why it is here. It is the canonical demonstration that the flashiest theme-switch animation on the web costs two lines of JavaScript, and it set the pattern nearly every shadcn-era site now copies.
- two lines of JavaScript, all the rest is CSS
- 7 named CSS blocks in a plain text file
- SVG mask and clip-path techniques
- 810 GitHub stars
- no LICENSE file in the repo
Verified 2026-08-15. HTTP 200. https://theme-toggle.rdsx.dev/, https://theme-toggle.rdsx.dev/animations.txt, https://github.com/rudrodip/theme-toggle-effect, api.github.com/repos/rudrodip/theme-toggle-effect, raw README.md
