| | |
|---|
| | | |
|---|
| | | document.addEventListener("nav", () => { |
|---|
| | | const switchTheme = (e: Event) => { |
|---|
| | | const newTheme = (e.target as HTMLInputElement)?.checked ? "dark" : "light" |
|---|
| | | const newTheme = |
|---|
| | | document.documentElement.getAttribute("saved-theme") === "dark" ? "light" : "dark" |
|---|
| | | document.documentElement.setAttribute("saved-theme", newTheme) |
|---|
| | | localStorage.setItem("theme", newTheme) |
|---|
| | | emitThemeChangeEvent(newTheme) |
|---|
| | |
|---|
| | | const newTheme = e.matches ? "dark" : "light" |
|---|
| | | document.documentElement.setAttribute("saved-theme", newTheme) |
|---|
| | | localStorage.setItem("theme", newTheme) |
|---|
| | | toggleSwitch.checked = e.matches |
|---|
| | | 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 |
|---|
| | | const themeButton = document.querySelector("#darkmode") as HTMLButtonElement |
|---|
| | | if (themeButton) { |
|---|
| | | themeButton.addEventListener("click", switchTheme) |
|---|
| | | window.addCleanup(() => themeButton.removeEventListener("click", switchTheme)) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // Listen for changes in prefers-color-scheme |
|---|
| | | const colorSchemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)") |
|---|
| | | colorSchemeMediaQuery.addEventListener("change", themeChange) |
|---|
