/
ethyne
/
notes
Обзор
Документация
Войти
/
ethyne
/
notes
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
v4
quartz/components/scripts/darkmode.inline.ts
37 строк
2 KB
Andrew
a11y(darkmode): use a button for the theme toggle (#1335)
24 авг 2024, 23:33
Не верифицирован
24 авг 2024, 23:33
4c9e860
Код
Авторство
О чём код?
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: Event) => { const newTheme = document.documentElement.getAttribute("saved-theme") === "dark" ? "light" : "dark" document.documentElement.setAttribute("saved-theme", newTheme) localStorage.setItem("theme", newTheme) emitThemeChangeEvent(newTheme) } const themeChange = (e: MediaQueryListEvent) => { const newTheme = e.matches ? "dark" : "light" document.documentElement.setAttribute("saved-theme", newTheme) localStorage.setItem("theme", newTheme) emitThemeChangeEvent(newTheme) } // Darkmode toggle const themeButton = document.querySelector("#darkmode") as HTMLButtonElement 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) window.addCleanup(() => colorSchemeMediaQuery.removeEventListener("change", themeChange)) })