// (function () {
// const root = document.documentElement;
// const btn = document.getElementById("themeToggle");
// const label = document.getElementById("themeLabel");
//
// if (!btn) return;
//
// const STORAGE_KEY = "kr_theme";
//
// function setTheme(theme) {
// if (theme === "dark") {
// root.setAttribute("data-theme", "dark");
// if (label) label.textContent = "Dark";
// } else {
// root.removeAttribute("data-theme");
// if (label) label.textContent = "Light";
// }
// try { localStorage.setItem(STORAGE_KEY, theme); } catch (_) {}
// window.dispatchEvent(new CustomEvent("theme:changed"));
// }
//
// function getInitialTheme() {
// try {
// const saved = localStorage.getItem(STORAGE_KEY);
// if (saved === "dark" || saved === "light") return saved;
// } catch (_) {}
//
// // default: follow system preference
// // const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
// // return prefersDark ? "dark" : "light";
// return "light";
// }
//
// let current = getInitialTheme();
// setTheme(current);
//
// btn.addEventListener("click", () => {
// current = (root.getAttribute("data-theme") === "dark") ? "light" : "dark";
// setTheme(current);
// });
// })();
// (function () {
// const root = document.documentElement;
// const btn = document.getElementById("themeToggle");
//
// if (!btn) return;
//
// const STORAGE_KEY = "kr_theme";
//
// function setTheme(theme) {
// if (theme === "dark") {
// root.setAttribute("data-theme", "dark");
// } else {
// root.removeAttribute("data-theme");
// }
// try { localStorage.setItem(STORAGE_KEY, theme); } catch (_) {}
// window.dispatchEvent(new CustomEvent("theme:changed"));
// }
//
// function getInitialTheme() {
// try {
// const saved = localStorage.getItem(STORAGE_KEY);
// if (saved === "dark" || saved === "light") return saved;
// } catch (_) {}
// return "light";
// }
//
// let current = getInitialTheme();
// setTheme(current);
//
// btn.addEventListener("click", () => {
// current = (root.getAttribute("data-theme") === "dark") ? "light" : "dark";
// setTheme(current);
// });
// })();
(function () {
const root = document.documentElement;
const btn = document.getElementById("themeToggle");
if (!btn) return;
const STORAGE_KEY = "kr_theme";
function setTheme(theme) {
if (theme === "dark") root.setAttribute("data-theme", "dark");
else root.removeAttribute("data-theme");
try { localStorage.setItem(STORAGE_KEY, theme); } catch (_) {}
}
function getInitialTheme() {
try {
const saved = localStorage.getItem(STORAGE_KEY);
if (saved === "dark" || saved === "light") return saved;
} catch (_) {}
return "light";
}
// Theme already applied in <head> script, but keep this for safety
setTheme(getInitialTheme());
// Remove transition lock after first paint so navigation never animates
requestAnimationFrame(() => {
requestAnimationFrame(() => {
root.classList.remove("no-theme-transition");
});
});
btn.addEventListener("click", () => {
// Enable transitions only for this interaction
root.classList.remove("no-theme-transition");
const next = (root.getAttribute("data-theme") === "dark") ? "light" : "dark";
setTheme(next);
// After the animation window, lock transitions again so page changes don’t animate
window.setTimeout(() => {
root.classList.add("no-theme-transition");
}, 350);
});
})();