spb/autoscholar

1"use client";2import { useEffect, useState } from "react";3import { IconMoon, IconSun } from "./Icons";45export function ThemeToggle({ label = "Toggle colour scheme" }: { label?: string }) {6  const [dark, setDark] = useState<boolean | null>(null);7  useEffect(() => {8    const stored = localStorage.getItem("as-theme");9    const prefers = window.matchMedia("(prefers-color-scheme: dark)").matches;10    const d = stored ? stored === "dark" : prefers;11    setDark(d);12    document.documentElement.classList.toggle("dark", d);13  }, []);14  const toggle = () => {15    const d = !dark;16    setDark(d);17    document.documentElement.classList.toggle("dark", d);18    localStorage.setItem("as-theme", d ? "dark" : "light");19  };20  return (21    <button22      type="button"23      onClick={toggle}24      aria-label={label}25      aria-pressed={dark === true}26      className="btn-icon"27      title={label}28    >29      {dark ? <IconSun /> : <IconMoon />}30    </button>31  );32}33