spb/immbot-ai

1"use client";2import { useEffect, useState } from "react";3import { Moon, Sun, Monitor } from "lucide-react";45type Theme = "light" | "dark" | "system";67function apply(theme: Theme) {8  const dark = theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);9  document.documentElement.classList.toggle("dark", dark);10}1112export function ThemeToggle({ className }: { className?: string }) {13  const [theme, setTheme] = useState<Theme>("light");14  useEffect(() => {15    setTheme((localStorage.getItem("immbot-theme") as Theme) || "light");16  }, []);17  const cycle = () => {18    const order: Theme[] = ["light", "dark", "system"];19    const next = order[(order.indexOf(theme) + 1) % 3];20    setTheme(next);21    localStorage.setItem("immbot-theme", next);22    apply(next);23  };24  const label = theme === "light" ? "Thème clair" : theme === "dark" ? "Thème sombre" : "Thème système";25  return (26    <button27      onClick={cycle}28      title={label + " — cliquer pour changer"}29      aria-label={label}30      className={`p-2 rounded-lg text-muted hover:text-fg hover:bg-surface-2 dark:hover:bg-brand-900/40 transition-colors ${className ?? ""}`}31    >32      {theme === "light" ? <Sun size={17} /> : theme === "dark" ? <Moon size={17} /> : <Monitor size={17} />}33    </button>34  );35}36