animated-theme-toggle

1"use client";
2 
3import { motion, useMotionValue, useTransform } from "motion/react";
4import { useTheme } from "next-themes";
5import { useEffect, useState } from "react";
6import { cn } from "@/lib/utils";
7import { Button } from "./button";
8 
9export const AnimatedThemeToggle = ({ className }: { className?: string }) => {
10  const { setTheme, resolvedTheme } = useTheme();
11  const [mounted, setMounted] = useState(false);
12 
13  // Avoid hydration mismatch
14  useEffect(() => {
15    setMounted(true);
16  }, []);
17 
18  const isDark = mounted ? resolvedTheme === "dark" : false;
19 
20  const toggleTheme = () => {
21    setTheme(isDark ? "light" : "dark");
22  };
23 
24  // Show a placeholder during SSR to avoid hydration mismatch
25  if (!mounted) {
26    return (
27      <Button className={cn("px-2.5", className)} variant="outline" disabled>
28        <div className="h-5 w-5" />
29      </Button>
30    );
31  }
32 
33  return (
34    <Button
35      onClick={toggleTheme}
36      className={cn("px-2.5", className)}
37      variant="outline"
38      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
39    >
40      <SolarSwitch isDark={isDark} />
41    </Button>
42  );
43};
44 
45const SolarSwitch = ({ isDark }: { isDark: boolean }) => {
46  const duration = 0.7;
47 
48  const moonVariants = {
49    checked: {
50      scale: 1,
51    },
52    unchecked: {
53      scale: 0,
54    },
55  };
56 
57  const sunVariants = {
58    checked: {
59      scale: 0,
60    },
61    unchecked: {
62      scale: 1,
63    },
64  };
65  const scaleMoon = useMotionValue(isDark ? 1 : 0);
66  const scaleSun = useMotionValue(isDark ? 0 : 1);
67  const pathLengthMoon = useTransform(scaleMoon, [0.6, 1], [0, 1]);
68  const pathLengthSun = useTransform(scaleSun, [0.6, 1], [0, 1]);
69 
70  return (
71    <motion.div animate={isDark ? "checked" : "unchecked"}>
72      <motion.svg
73        width="20"
74        height="20"
75        viewBox="0 0 25 25"
76        fill="none"
77        xmlns="http://www.w3.org/2000/svg"
78      >
79        <motion.path
80          d="M12.4058 17.7625C15.1672 17.7625 17.4058 15.5239 17.4058 12.7625C17.4058 10.0011 15.1672 7.76251 12.4058 7.76251C9.64434 7.76251 7.40576 10.0011 7.40576 12.7625C7.40576 15.5239 9.64434 17.7625 12.4058 17.7625Z"
81          stroke="currentColor"
82          strokeWidth="2"
83          strokeLinecap="round"
84          strokeLinejoin="round"
85          variants={sunVariants}
86          custom={isDark}
87          transition={{ duration }}
88          style={{
89            pathLength: pathLengthSun,
90            scale: scaleSun,
91          }}
92        />
93        <motion.path
94// … truncated