spb/spboucher.ai Public

1/*2  theme-toggle.tsx3  spboucher.ai Web4  Author: Simon-Pierre Boucher5  Mail: contact@spboucher.ai6*/78"use client";910import * as React from "react";11import { Moon, Sun } from "lucide-react";1213import { Button } from "@/components/ui/button";1415export function ThemeToggle() {16  const [mounted, setMounted] = React.useState(false);17  const [dark, setDark] = React.useState(false);1819  React.useEffect(() => {20    setMounted(true);21    setDark(document.documentElement.classList.contains("dark"));22  }, []);2324  function toggle() {25    const next = !dark;26    setDark(next);27    document.documentElement.classList.toggle("dark", next);28    try {29      localStorage.setItem("theme", next ? "dark" : "light");30    } catch {31      // localStorage unavailable (private mode); theme still applies for this page view32    }33  }3435  return (36    <Button37      variant="ghost"38      size="icon"39      aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}40      onClick={toggle}41    >42      {mounted && dark ? <Sun /> : <Moon />}43    </Button>44  );45}46