Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1.4 kB · 47 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748import { MoonIcon, SunIcon } from "@octanejs/phosphor-icons";import { useEffect, useState } from "octane";import { Button } from "octane-kumo/components/button";
export function ThemeToggle() { const [dark, setDark] = useState(false);
useEffect(() => { const system = window.matchMedia("(prefers-color-scheme: dark)"); const sync = () => { setDark(document.documentElement.dataset.mode === "dark"); }; const followSystem = () => { if (!document.documentElement.dataset.themePreference) { document.documentElement.dataset.mode = system.matches ? "dark" : "light"; sync(); } }; sync(); system.addEventListener("change", followSystem); return () => system.removeEventListener("change", followSystem); }, []);
const label = dark ? "Switch to light mode" : "Switch to dark mode"; return ( <Button variant="ghost" shape="square" icon={dark ? SunIcon : MoonIcon} aria-label={label} title={label} onClick={() => { const mode = dark ? "light" : "dark"; document.documentElement.dataset.mode = mode; document.documentElement.dataset.themePreference = mode; setDark(mode === "dark"); try { localStorage.setItem("flarebot-theme", mode); } catch { // The toggle still works when browser storage is unavailable. } }} /> );}