2024-01-08 09:25:00 +00:00
|
|
|
// https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class
|
|
|
|
|
2024-01-06 19:45:47 +00:00
|
|
|
window.onload = (event) => {
|
|
|
|
const btn = document.getElementById("theme-toggler");
|
|
|
|
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
|
|
|
|
const currentTheme = localStorage.getItem("theme");
|
|
|
|
|
|
|
|
if (currentTheme == "dark") {
|
|
|
|
document.body.classList.toggle("dark");
|
|
|
|
} else if (currentTheme == "light") {
|
|
|
|
document.body.classList.toggle("light");
|
|
|
|
btn.classList.toggle("rotate-180");
|
|
|
|
}
|
|
|
|
|
|
|
|
btn.addEventListener("click", function () {
|
|
|
|
btn.classList.toggle("rotate-180");
|
|
|
|
var theme = "dark";
|
|
|
|
if (darkTheme.matches) {
|
|
|
|
document.body.classList.toggle("light");
|
|
|
|
theme = document.body.classList.contains("light") ? "light" : "dark";
|
|
|
|
} else {
|
|
|
|
document.body.classList.toggle("dark");
|
|
|
|
theme = document.body.classList.contains("dark") ? "dark" : "light";
|
|
|
|
}
|
|
|
|
localStorage.setItem("theme", theme);
|
|
|
|
});
|
|
|
|
}
|