2025-06-09 19:38:44 +03:00
|
|
|
const prefersDark = localStorage.getItem("theme") === "dark" || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|
|
|
|
if (prefersDark) {
|
|
|
|
|
document.body.classList.add("theme-dark");
|
|
|
|
|
document.body.classList.remove("theme-light");
|
|
|
|
|
} else {
|
|
|
|
|
document.body.classList.remove("theme-dark");
|
|
|
|
|
document.body.classList.add("theme-light");
|
2023-09-28 00:14:44 -04:00
|
|
|
}
|
|
|
|
|
|
2023-09-27 23:18:03 -04:00
|
|
|
export default function setupThemeSelector() {
|
|
|
|
|
const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
|
2025-06-09 19:38:44 +03:00
|
|
|
|
|
|
|
|
const themeSelection: HTMLDivElement = document.querySelector(".theme-selection")!;
|
|
|
|
|
themeSelection.classList.add("no-transition");
|
|
|
|
|
themeSwitch.checked = prefersDark;
|
|
|
|
|
setTimeout(() => themeSelection.classList.remove("no-transition"), 400);
|
2024-06-08 15:21:59 -04:00
|
|
|
|
2023-09-27 23:18:03 -04:00
|
|
|
themeSwitch?.addEventListener("change", () => {
|
|
|
|
|
if (themeSwitch.checked) {
|
|
|
|
|
document.body.classList.add("theme-dark");
|
|
|
|
|
document.body.classList.remove("theme-light");
|
|
|
|
|
localStorage.setItem("theme", "dark");
|
2025-06-09 19:38:44 +03:00
|
|
|
} else {
|
2023-09-27 23:18:03 -04:00
|
|
|
document.body.classList.remove("theme-dark");
|
|
|
|
|
document.body.classList.add("theme-light");
|
|
|
|
|
localStorage.setItem("theme", "light");
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-06-09 19:38:44 +03:00
|
|
|
}
|