Theme toggle

"use client";

import * as React from "react";
import { MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Theme = "light" | "dark";

const STORAGE_KEY = "theme";

function subscribe(onChange: () => void) {
  const observer = new MutationObserver(onChange);
  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
  return () => observer.disconnect();
}

function readTheme(): Theme {
  return document.documentElement.classList.contains("dark") ? "dark" : "light";
}

/** The theme is null until mounted, so server and client markup match. */
function useHtmlTheme(): Theme | null {
  return React.useSyncExternalStore(subscribe, readTheme, () => null);
}

function applyTheme(next: Theme) {
  const root = document.documentElement;
  root.classList.remove("light", "dark");
  root.classList.add(next);
  root.style.colorScheme = next;
  try {
    window.localStorage.setItem(STORAGE_KEY, next);
  } catch {
    // Storage can be blocked (private mode, quota). The class still switches for this visit.
  }
}

type ThemeToggleProps = Omit<React.ComponentProps<typeof Button>, "onClick" | "children" | "aria-label">;

/**
 * Switches the html dark class and remembers the choice in localStorage under "theme".
 * No theme library: it reads the class after mount and watches it for outside changes.
 */
export function ThemeToggle({ variant = "ghost", size = "icon", className, ...props }: ThemeToggleProps) {
  const theme = useHtmlTheme();
  const Icon = theme === null ? SunMoonIcon : theme === "dark" ? SunIcon : MoonIcon;
  const label = theme === null ? "Switch theme" : theme === "dark" ? "Switch to light theme" : "Switch to dark theme";

  return (
    <Button
      type="button"
      variant={variant}
      size={size}
      aria-label={label}
      data-theme={theme ?? undefined}
      onClick={() => applyTheme((theme ?? readTheme()) === "dark" ? "light" : "dark")}
      className={cn("text-muted-foreground transition-colors", className)}
      {...props}
    >
      <Icon aria-hidden="true" />
    </Button>
  );
}