const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark" const currentTheme = localStorage.getItem("theme") ?? userPref document.documentElement.setAttribute("saved-theme", currentTheme) const emitThemeChangeEvent = (theme: "light" | "dark") => { const event: CustomEventMap["themechange"] = new CustomEvent("themechange", { detail: { theme }, }) document.dispatchEvent(event) } document.addEventListener("nav", () => { const switchTheme = (e: any) => { const newTheme = e.target.checked ? "dark" : "light" document.documentElement.setAttribute("saved-theme", newTheme) localStorage.setItem("theme", newTheme) emitThemeChangeEvent(newTheme) } // Darkmode toggle const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement toggleSwitch.addEventListener("change", switchTheme) window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme)) if (currentTheme === "dark") { toggleSwitch.checked = true } // Listen for changes in prefers-color-scheme const colorSchemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)") colorSchemeMediaQuery.addEventListener("change", (e) => { const newTheme = e.matches ? "dark" : "light" document.documentElement.setAttribute("saved-theme", newTheme) localStorage.setItem("theme", newTheme) toggleSwitch.checked = e.matches emitThemeChangeEvent(newTheme) }) })