Theme Toggle Effect
Animated transitions when switching between light and dark themes.
oh I love this one, have to implement it on orcdev.com
OrcDev, Creator of 8bitcn.com
Browser compatibility
This component uses the View Transitions API. Check the latest browser compatibility on MDN before using in production.
Installation
Triangle
Install-Module cnpx -Scope CurrentUser -Force; Import-Module cnpx; cnpx add @chadnpc/theme-toggle-effect-triangleTriangle blur
Install-Module cnpx -Scope CurrentUser -Force; Import-Module cnpx; cnpx add @chadnpc/theme-toggle-effect-triangle-blurCircle
Install-Module cnpx -Scope CurrentUser -Force; Import-Module cnpx; cnpx add @chadnpc/theme-toggle-effect-circleCircle blur
Install-Module cnpx -Scope CurrentUser -Force; Import-Module cnpx; cnpx add @chadnpc/theme-toggle-effect-circle-blurCircle blur (top left)
Install-Module cnpx -Scope CurrentUser -Force; Import-Module cnpx; cnpx add @chadnpc/theme-toggle-effect-circle-blur-top-leftPolygon
Install-Module cnpx -Scope CurrentUser -Force; Import-Module cnpx; cnpx add @chadnpc/theme-toggle-effect-polygonPolygon gradient
Install-Module cnpx -Scope CurrentUser -Force; Import-Module cnpx; cnpx add @chadnpc/theme-toggle-effect-polygon-gradientUsage
Wrap your theme setter with document.startViewTransition to trigger the effect:
const { setTheme } = useTheme()
function toggleTheme(theme: string) {
if (!document.startViewTransition) {
setTheme(theme)
return
}
document.startViewTransition(() => setTheme(theme))
}