import { useEffect, useState } from "react";
import { Listbox } from "@headlessui/react";
import clsx from "clsx";
const themes = [
{ name: "Light", value: "light", icon: LightIcon },
{ name: "Dark", value: "dark", icon: DarkIcon },
{ name: "System", value: "system", icon: SystemIcon },
];
function LightIcon(props) {
return (
);
}
function DarkIcon(props) {
return (
);
}
function SystemIcon(props) {
return (
);
}
export function ThemeSelector(props) {
let [selectedTheme, setSelectedTheme] = useState();
useEffect(() => {
if (selectedTheme) {
document.documentElement.setAttribute("data-theme", selectedTheme.value);
} else {
setSelectedTheme(
themes.find((theme) => theme.value === document.documentElement.getAttribute("data-theme"))
);
}
}, [selectedTheme]);
useEffect(() => {
let handler = () =>
setSelectedTheme(themes.find((theme) => theme.value === (window.localStorage.theme ?? "system")));
window.addEventListener("storage", handler);
return () => window.removeEventListener("storage", handler);
}, []);
return (
Theme
{themes.map((theme) => (
clsx("flex cursor-pointer select-none items-center rounded-[0.625rem] p-1", {
"text-brand-dark dark:text-brand-light": selected,
"text-slate-800 dark:text-slate-100": active && !selected,
"text-slate-700 dark:text-slate-400": !active && !selected,
"bg-slate-100 dark:bg-slate-900/40": active,
})
}>
{({ selected }) => (
<>
{theme.name}
)}
))}
);
}