78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
function changeTheme() {
|
|
const element = document.documentElement;
|
|
const theme = element.classList.contains("dark") ? "light" : "dark";
|
|
|
|
const css = document.createElement("style");
|
|
|
|
css.appendChild(
|
|
document.createTextNode(
|
|
`* {
|
|
-webkit-transition: none !important;
|
|
-moz-transition: none !important;
|
|
-o-transition: none !important;
|
|
-ms-transition: none !important;
|
|
transition: none !important;
|
|
}`,
|
|
),
|
|
);
|
|
document.head.appendChild(css);
|
|
|
|
if (theme === "dark") {
|
|
element.classList.add("dark");
|
|
element.dataset.theme = "dark";
|
|
} else {
|
|
element.classList.remove("dark");
|
|
element.dataset.theme = "light";
|
|
}
|
|
|
|
window.getComputedStyle(css).opacity;
|
|
document.head.removeChild(css);
|
|
localStorage.theme = theme;
|
|
}
|
|
|
|
function preloadTheme() {
|
|
const theme = (() => {
|
|
const userTheme = localStorage.theme;
|
|
|
|
if (userTheme === "light" || userTheme === "dark") {
|
|
return userTheme;
|
|
} else {
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light";
|
|
}
|
|
})();
|
|
|
|
const element = document.documentElement;
|
|
|
|
if (theme === "dark") {
|
|
element.classList.add("dark");
|
|
element.dataset.theme = "dark";
|
|
} else {
|
|
element.classList.remove("dark");
|
|
element.dataset.theme = "light";
|
|
}
|
|
|
|
localStorage.theme = theme;
|
|
}
|
|
|
|
window.onload = () => {
|
|
function initializeThemeButtons() {
|
|
const headerThemeButton = document.getElementById(
|
|
"header-theme-button",
|
|
);
|
|
const drawerThemeButton = document.getElementById(
|
|
"drawer-theme-button",
|
|
);
|
|
headerThemeButton?.addEventListener("click", changeTheme);
|
|
drawerThemeButton?.addEventListener("click", changeTheme);
|
|
}
|
|
|
|
document.addEventListener("astro:after-swap", initializeThemeButtons);
|
|
initializeThemeButtons();
|
|
};
|
|
|
|
document.addEventListener("astro:after-swap", preloadTheme);
|
|
|
|
preloadTheme();
|