2025-10-29 19:00:03 +02:00
|
|
|
const themeRootEl = document.documentElement;
|
2023-09-28 00:14:44 -04:00
|
|
|
|
2025-10-29 19:05:23 +02:00
|
|
|
/**
|
|
|
|
|
* Note:
|
|
|
|
|
*
|
|
|
|
|
* - Setting of the .theme-dark or .theme-light is done in the share template's <head> to avoid a flash.
|
|
|
|
|
* - Setting of the value of the checkbox is also done in the template, near the definition of the input box.
|
|
|
|
|
*/
|
|
|
|
|
|
2023-09-27 23:18:03 -04:00
|
|
|
export default function setupThemeSelector() {
|
|
|
|
|
const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
|
|
|
|
|
themeSwitch?.addEventListener("change", () => {
|
2025-10-29 18:40:31 +02:00
|
|
|
const theme = themeSwitch.checked ? "dark" : "light";
|
|
|
|
|
setTheme(theme);
|
|
|
|
|
localStorage.setItem("theme", theme);
|
2023-09-27 23:18:03 -04:00
|
|
|
});
|
2025-06-09 19:38:44 +03:00
|
|
|
}
|
2025-10-29 18:35:27 +02:00
|
|
|
|
2025-10-29 18:40:31 +02:00
|
|
|
function setTheme(theme: string) {
|
|
|
|
|
if (theme === "dark") {
|
2025-10-29 19:00:03 +02:00
|
|
|
themeRootEl.classList.add("theme-dark");
|
|
|
|
|
themeRootEl.classList.remove("theme-light");
|
2025-10-29 18:40:31 +02:00
|
|
|
} else {
|
2025-10-29 19:00:03 +02:00
|
|
|
themeRootEl.classList.remove("theme-dark");
|
|
|
|
|
themeRootEl.classList.add("theme-light");
|
2025-10-29 18:35:27 +02:00
|
|
|
}
|
|
|
|
|
}
|
