spb/autoscholar

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