spb/polyllm

1"use client";2import * as React from "react";3import { useTheme } from "next-themes";4import { Moon, Sun } from "lucide-react";5import { cn } from "@/lib/utils";67const subscribe = () => () => {};89export function ThemeToggle({ className }: { className?: string }) {10  const { resolvedTheme, setTheme } = useTheme();11  // Avoid a hydration mismatch: the resolved theme is only known on the client.12  const mounted = React.useSyncExternalStore(13    subscribe,14    () => true,15    () => false,16  );17  const isDark = mounted && resolvedTheme === "dark";18  return (19    <button20      type="button"21      onClick={() => setTheme(isDark ? "light" : "dark")}22      className={cn(23        "tap inline-flex size-8 items-center justify-center rounded-md text-fg-muted transition-colors hover:bg-bg-muted hover:text-fg",24        className,25      )}26      aria-label={mounted ? (isDark ? "Switch to light theme" : "Switch to dark theme") : "Toggle theme"}27      title="Toggle theme"28    >29      {mounted ? isDark ? <Sun className="size-4" /> : <Moon className="size-4" /> : <span className="size-4" />}30    </button>31  );32}33