import { IS_SITE_UNDER_CONSTRUCTION } from "@root/config";
import type { Component, JSX } from "solid-js";
import { createSignal, onMount, Switch, Match } from "solid-js";
import "./ThemeSwitcher.scss";
const MoonIcon: Component = () => (
);
const SunIcon: Component = () => (
);
const ThemeSwitcher: Component = () => {
const [theme, setTheme] = createSignal("light");
const [isReady, setIsReady] = createSignal(false);
const toggleTheme: JSX.EventHandler = () => {
if (!window.theme) return;
const newTheme = theme() === "light" ? "dark" : "light";
const toggleEvent = new CustomEvent("onthemetoggled", { detail: newTheme });
setTheme(newTheme);
window.dispatchEvent(toggleEvent);
localStorage.setItem("theme", newTheme);
document.documentElement.setAttribute("data-theme", newTheme);
};
onMount(() => {
setIsReady(true);
if (window.theme) {
setTheme(window.theme);
/* Update theme state on changing OS theme */
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: isDark }) => {
const theme = isDark ? "dark" : "light";
setTheme(theme);
});
}
});
return (
);
};
export default ThemeSwitcher;