Skip to content
Index730 resources
Theme Toggle Effect

Theme Toggle Effect

Copy-paste CSS for View Transitions API theme-switch animations

Tier A · StrongReferenceAnimation Librarytheme-toggle.rdsx.dev

(Visit theme-toggle.rdsx.dev ↗)(Docs)(Repository)
Preview image from theme-toggle.rdsx.dev

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.

For an agent

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.

Install command, framework, licence and component list.

Facts

License
No license file
Pricing
Free, Open source
Framework
Vanilla JS
Styling
Vanilla CSS, CSS custom properties
Distribution
Copy-paste snippet, GitHub repository
Platform
Web
Content type
Code
Agent readiness
Copy-paste ready code, Readable open source
Accessibility
Known accessibility gaps
Maturity
Stable
GitHub stars
810

Components it ships

2
TransitionPage Transition

Notable for

  • 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

Provenance

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

Also in Motion & Interaction

6
theme-toggle.rdsx.devTier A