2018-07-20 19:14:22 +02:00
|
|
|
// Toggle theme
|
|
|
|
|
2022-06-04 01:07:58 +02:00
|
|
|
const localTheme = window.localStorage && window.localStorage.getItem("theme");
|
2018-12-21 19:07:37 +01:00
|
|
|
const themeToggle = document.querySelector(".theme-toggle");
|
2018-07-20 19:14:22 +02:00
|
|
|
|
2022-06-04 01:07:58 +02:00
|
|
|
if (localTheme) {
|
|
|
|
document.body.classList.remove("light-theme", "dark-theme");
|
|
|
|
document.body.classList.add(localTheme);
|
2018-12-21 19:07:37 +01:00
|
|
|
}
|
2018-07-20 19:14:22 +02:00
|
|
|
|
2018-12-21 19:07:37 +01:00
|
|
|
themeToggle.addEventListener("click", () => {
|
2022-06-04 01:07:58 +02:00
|
|
|
const themeUndefined = !new RegExp("(dark|light)-theme").test(document.body.className);
|
|
|
|
const isOSDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
|
|
|
|
|
|
if (themeUndefined) {
|
|
|
|
if (isOSDark) {
|
|
|
|
document.body.classList.add("light-theme");
|
|
|
|
} else {
|
|
|
|
document.body.classList.add("dark-theme");
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
document.body.classList.toggle("light-theme");
|
|
|
|
document.body.classList.toggle("dark-theme");
|
|
|
|
}
|
|
|
|
|
2018-08-24 09:37:55 +02:00
|
|
|
window.localStorage &&
|
|
|
|
window.localStorage.setItem(
|
2018-12-21 19:07:37 +01:00
|
|
|
"theme",
|
2022-06-04 01:07:58 +02:00
|
|
|
document.body.classList.contains("dark-theme") ? "dark-theme" : "light-theme",
|
2018-12-21 19:07:37 +01:00
|
|
|
);
|
|
|
|
});
|