Mode Toggle

1"use client";
2 
3import { Moon, Sun } from "@phosphor-icons/react";
4import { useTheme } from "next-themes";
5import * as React from "react";
6 
7import type { Material } from "@/lib/material";
8import { Button } from "./button";
9 
10export function ModeToggle({ variant = "glass", material }: { variant?: "default" | "glass"; material?: Material }) {
11  const { setTheme, resolvedTheme } = useTheme();
12  const [mounted, setMounted] = React.useState(false);
13 
14  React.useEffect(() => {
15    setMounted(true);
16  }, []);
17 
18  const isDark = mounted && resolvedTheme === "dark";
19 
20  return (
21    <Button
22      variant={variant === "glass" ? "glass" : "outline"}
23      material={material}
24      size="icon"
25      onClick={mounted ? () => setTheme(isDark ? "light" : "dark") : undefined}
26      aria-label="Toggle theme"
27    >
28      {/* Cross-fade sun↔moon: both icons stay mounted (one absolute) and animate opacity + scale +
29          blur on cubic-bezier(0.2,0,0,1). Dependency-free so the shipped component stays portable. */}
30      <span className="relative inline-flex size-[1.2rem] items-center justify-center">
31        <Sun
32          className="absolute size-[1.2rem] transition-[opacity,scale,filter] duration-300 ease-[cubic-bezier(0.2,0,0,1)]"
33          style={{
34            opacity: isDark ? 0 : 1,
35            scale: isDark ? "0.25" : "1",
36            filter: isDark ? "blur(4px)" : "blur(0px)",
37          }}
38        />
39        <Moon
40          className="absolute size-[1.2rem] transition-[opacity,scale,filter] duration-300 ease-[cubic-bezier(0.2,0,0,1)]"
41          style={{
42            opacity: isDark ? 1 : 0,
43            scale: isDark ? "1" : "0.25",
44            filter: isDark ? "blur(0px)" : "blur(4px)",
45          }}
46        />
47      </span>
48      <span className="sr-only">Toggle theme</span>
49    </Button>
50  );
51}