46 lines
1.7 KiB
JavaScript
46 lines
1.7 KiB
JavaScript
(() => {
|
|
const root = document.documentElement;
|
|
const storageKey = "nouri-theme";
|
|
const toggles = () => Array.from(document.querySelectorAll("[data-theme-toggle]"));
|
|
|
|
const applyTheme = (theme) => {
|
|
const resolved = theme || localStorage.getItem(storageKey) || "auto";
|
|
const finalTheme =
|
|
resolved === "auto"
|
|
? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
|
|
: resolved;
|
|
root.dataset.theme = finalTheme;
|
|
|
|
toggles().forEach((button) => {
|
|
const nextModeLabel = finalTheme === "dark" ? "Hell" : "Dunkel";
|
|
const label = button.querySelector("[data-theme-label]");
|
|
const icon = button.querySelector("[data-theme-icon]");
|
|
|
|
if (label) {
|
|
label.textContent = nextModeLabel;
|
|
} else {
|
|
button.textContent = nextModeLabel;
|
|
}
|
|
|
|
if (icon) {
|
|
icon.classList.toggle("icon-sun-theme", finalTheme === "dark");
|
|
icon.classList.toggle("icon-moon-theme", finalTheme !== "dark");
|
|
}
|
|
|
|
button.setAttribute("aria-label", `${nextModeLabel} aktivieren`);
|
|
});
|
|
};
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
applyTheme();
|
|
toggles().forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const current = root.dataset.theme === "dark" ? "dark" : "light";
|
|
const next = current === "dark" ? "light" : "dark";
|
|
localStorage.setItem(storageKey, next);
|
|
applyTheme(next);
|
|
});
|
|
});
|
|
});
|
|
})();
|