Animated Theme Toggler

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { Moon, Sun } from "@lucide/svelte";
4	import { cn } from "$UTILS$";
5 
6	interface AnimatedThemeTogglerProps {
7		class?: string;
8		duration?: number;
9	}
10 
11	let { class: className, duration = 400, ...props }: AnimatedThemeTogglerProps = $props();
12 
13	let isDark = $state(false);
14	let buttonRef: HTMLButtonElement | null = $state(null);
15 
16	onMount(() => {
17		const updateTheme = () => {
18			isDark = document.documentElement.classList.contains("dark");
19		};
20 
21		updateTheme();
22 
23		const observer = new MutationObserver(updateTheme);
24		observer.observe(document.documentElement, {
25			attributes: true,
26			attributeFilter: ["class"],
27		});
28 
29		return () => observer.disconnect();
30	});
31 
32	const toggleTheme = async () => {
33		if (!buttonRef) return;
34 
35		// Check if View Transition API is supported
36		if (!document.startViewTransition) {
37			// Fallback for browsers that don't support View Transition API
38			const newTheme = !isDark;
39			isDark = newTheme;
40			document.documentElement.classList.toggle("dark");
41			localStorage.setItem("theme", newTheme ? "dark" : "light");
42			return;
43		}
44 
45		await document.startViewTransition(() => {
46			const newTheme = !isDark;
47			isDark = newTheme;
48			document.documentElement.classList.toggle("dark");
49			localStorage.setItem("theme", newTheme ? "dark" : "light");
50		}).ready;
51 
52		const { top, left, width, height } = buttonRef.getBoundingClientRect();
53		const x = left + width / 2;
54		const y = top + height / 2;
55		const maxRadius = Math.hypot(
56			Math.max(left, window.innerWidth - left),
57			Math.max(top, window.innerHeight - top)
58		);
59 
60		document.documentElement.animate(
61			{
62				clipPath: [
63					`circle(0px at ${x}px ${y}px)`,
64					`circle(${maxRadius}px at ${x}px ${y}px)`,
65				],
66			},
67			{
68				duration,
69				easing: "ease-in-out",
70				pseudoElement: "::view-transition-new(root)",
71			}
72		);
73	};
74</script>
75 
76<button bind:this={buttonRef} onclick={toggleTheme} class={cn(className)} {...props}>
77	{#if isDark}
78		<Sun />
79	{:else}
80		<Moon />
81	{/if}
82	<span class="sr-only">Toggle theme</span>
83</button>