Skip to content

Fix AnimatedThemeToggler crash on Firefox (View Transitions API fallback) #879

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Yeom-JinHo merged 3 commits into from
Mar 3, 2026
Merged

Fix AnimatedThemeToggler crash on Firefox (View Transitions API fallback) #879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b6c026
fix: fallback for missing startViewTransition API
DhirajTsx Jan 17, 2026
495cc57
style(animated-theme-toggler): remove extra whitespace
Yeom-JinHo Mar 3, 2026
cbe0ecb
fix(animated-theme-toggler): add defensive check for ViewTransition.r…
Yeom-JinHo Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 50 additions & 31 deletions apps/www/public/llms-full.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2845,40 +2845,59 @@ export const AnimatedThemeToggler = ({
return () => observer.disconnect()
}, [])

const toggleTheme = useCallback(async () => {
const toggleTheme = useCallback(() => {
if (!buttonRef.current) return

await document.startViewTransition(() => {
flushSync(() => {
const newTheme = !isDark
setIsDark(newTheme)
document.documentElement.classList.toggle("dark")
localStorage.setItem("theme", newTheme ? "dark" : "light")
})
}).ready

const { top, left, width, height } =
buttonRef.current.getBoundingClientRect()
const x = left + width / 2
const y = top + height / 2
const maxRadius = Math.hypot(
Math.max(left, window.innerWidth - left),
Math.max(top, window.innerHeight - top)
)
const applyTheme = () => {
const newTheme = !isDark
setIsDark(newTheme)
document.documentElement.classList.toggle("dark")
localStorage.setItem("theme", newTheme ? "dark" : "light")
}

document.documentElement.animate(
{
clipPath: [
`circle(0px at ${x}px ${y}px)`,
`circle(${maxRadius}px at ${x}px ${y}px)`,
],
},
{
duration,
easing: "ease-in-out",
pseudoElement: "::view-transition-new(root)",
}
)
if (
typeof document === "undefined" ||
!("startViewTransition" in document)
) {
applyTheme()
return
}

const transition = document.startViewTransition(() => {
flushSync(applyTheme)
})

const ready = transition?.ready
if (ready && typeof ready.then === "function") {
ready.then(() => {
const button = buttonRef.current
if (!button) return

const { top, left, width, height } = button.getBoundingClientRect()

const x = left + width / 2
const y = top + height / 2

const maxRadius = Math.hypot(
Math.max(left, window.innerWidth - left),
Math.max(top, window.innerHeight - top)
)

document.documentElement.animate(
{
clipPath: [
`circle(0px at ${x}px ${y}px)`,
`circle(${maxRadius}px at ${x}px ${y}px)`,
],
},
{
duration,
easing: "ease-in-out",
pseudoElement: "::view-transition-new(root)",
}
)
})
}
}, [isDark, duration])

return (
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/animated-theme-toggler.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"files": [
{
"path": "registry/magicui/animated-theme-toggler.tsx",
"content": "\"use client\"\n\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { flushSync } from \"react-dom\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface AnimatedThemeTogglerProps extends React.ComponentPropsWithoutRef<\"button\"> {\n duration?: number\n}\n\nexport const AnimatedThemeToggler = ({\n className,\n duration = 400,\n ...props\n}: AnimatedThemeTogglerProps) => {\n const [isDark, setIsDark] = useState(false)\n const buttonRef = useRef<HTMLButtonElement>(null)\n\n useEffect(() => {\n const updateTheme = () => {\n setIsDark(document.documentElement.classList.contains(\"dark\"))\n }\n\n updateTheme()\n\n const observer = new MutationObserver(updateTheme)\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"class\"],\n })\n\n return () => observer.disconnect()\n }, [])\n\n const toggleTheme = useCallback(async () => {\n if (!buttonRef.current) return\n\n await document.startViewTransition(() => {\n flushSync(() => {\n const newTheme = !isDark\n setIsDark(newTheme)\n document.documentElement.classList.toggle(\"dark\")\n localStorage.setItem(\"theme\", newTheme ? \"dark\" : \"light\")\n })\n }).ready\n\n const { top, left, width, height } =\n buttonRef.current.getBoundingClientRect()\n const x = left + width / 2\n const y = top + height / 2\n const maxRadius = Math.hypot(\n Math.max(left, window.innerWidth - left),\n Math.max(top, window.innerHeight - top)\n )\n\n document.documentElement.animate(\n {\n clipPath: [\n `circle(0px at ${x}px ${y}px)`,\n `circle(${maxRadius}px at ${x}px ${y}px)`,\n ],\n },\n {\n duration,\n easing: \"ease-in-out\",\n pseudoElement: \"::view-transition-new(root)\",\n }\n )\n }, [isDark, duration])\n\n return (\n <button\n ref={buttonRef}\n onClick={toggleTheme}\n className={cn(className)}\n {...props}\n >\n {isDark ? <Sun /> : <Moon />}\n <span className=\"sr-only\">Toggle theme</span>\n </button>\n )\n}\n",
"content": "\"use client\"\n\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { flushSync } from \"react-dom\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface AnimatedThemeTogglerProps extends React.ComponentPropsWithoutRef<\"button\"> {\n duration?: number\n}\n\nexport const AnimatedThemeToggler = ({\n className,\n duration = 400,\n ...props\n}: AnimatedThemeTogglerProps) => {\n const [isDark, setIsDark] = useState(false)\n const buttonRef = useRef<HTMLButtonElement>(null)\n\n useEffect(() => {\n const updateTheme = () => {\n setIsDark(document.documentElement.classList.contains(\"dark\"))\n }\n\n updateTheme()\n\n const observer = new MutationObserver(updateTheme)\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"class\"],\n })\n\n return () => observer.disconnect()\n }, [])\n\n const toggleTheme = useCallback(() => {\n if (!buttonRef.current) return\n\n const applyTheme = () => {\n const newTheme = !isDark\n setIsDark(newTheme)\n document.documentElement.classList.toggle(\"dark\")\n localStorage.setItem(\"theme\", newTheme ? \"dark\" : \"light\")\n }\n\n if (\n typeof document === \"undefined\" ||\n !(\"startViewTransition\" in document)\n ) {\n applyTheme()\n return\n }\n\n const transition = document.startViewTransition(() => {\n flushSync(applyTheme)\n })\n\n const ready = transition?.ready\n if (ready && typeof ready.then === \"function\") {\n ready.then(() => {\n const button = buttonRef.current\n if (!button) return\n\n const { top, left, width, height } = button.getBoundingClientRect()\n\n const x = left + width / 2\n const y = top + height / 2\n\n const maxRadius = Math.hypot(\n Math.max(left, window.innerWidth - left),\n Math.max(top, window.innerHeight - top)\n )\n\n document.documentElement.animate(\n {\n clipPath: [\n `circle(0px at ${x}px ${y}px)`,\n `circle(${maxRadius}px at ${x}px ${y}px)`,\n ],\n },\n {\n duration,\n easing: \"ease-in-out\",\n pseudoElement: \"::view-transition-new(root)\",\n }\n )\n })\n }\n }, [isDark, duration])\n\n return (\n <button\n ref={buttonRef}\n onClick={toggleTheme}\n className={cn(className)}\n {...props}\n >\n {isDark ? <Sun /> : <Moon />}\n <span className=\"sr-only\">Toggle theme</span>\n </button>\n )\n}\n",
"type": "registry:ui"
}
],
Expand Down
81 changes: 50 additions & 31 deletions apps/www/registry/magicui/animated-theme-toggler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,40 +34,59 @@ export const AnimatedThemeToggler = ({
return () => observer.disconnect()
}, [])

const toggleTheme = useCallback(async () => {
const toggleTheme = useCallback(() => {
if (!buttonRef.current) return

await document.startViewTransition(() => {
flushSync(() => {
const newTheme = !isDark
setIsDark(newTheme)
document.documentElement.classList.toggle("dark")
localStorage.setItem("theme", newTheme ? "dark" : "light")
const applyTheme = () => {
const newTheme = !isDark
setIsDark(newTheme)
document.documentElement.classList.toggle("dark")
localStorage.setItem("theme", newTheme ? "dark" : "light")
}

if (
typeof document === "undefined" ||
!("startViewTransition" in document)
) {
applyTheme()
return
}

const transition = document.startViewTransition(() => {
flushSync(applyTheme)
})

const ready = transition?.ready
if (ready && typeof ready.then === "function") {
ready.then(() => {
const button = buttonRef.current
if (!button) return

const { top, left, width, height } = button.getBoundingClientRect()

const x = left + width / 2
const y = top + height / 2

const maxRadius = Math.hypot(
Math.max(left, window.innerWidth - left),
Math.max(top, window.innerHeight - top)
)

document.documentElement.animate(
{
clipPath: [
`circle(0px at ${x}px ${y}px)`,
`circle(${maxRadius}px at ${x}px ${y}px)`,
],
},
{
duration,
easing: "ease-in-out",
pseudoElement: "::view-transition-new(root)",
}
)
})
}).ready

const { top, left, width, height } =
buttonRef.current.getBoundingClientRect()
const x = left + width / 2
const y = top + height / 2
const maxRadius = Math.hypot(
Math.max(left, window.innerWidth - left),
Math.max(top, window.innerHeight - top)
)

document.documentElement.animate(
{
clipPath: [
`circle(0px at ${x}px ${y}px)`,
`circle(${maxRadius}px at ${x}px ${y}px)`,
],
},
{
duration,
easing: "ease-in-out",
pseudoElement: "::view-transition-new(root)",
}
)
}
}, [isDark, duration])

return (
Expand Down