51 lines
1.9 KiB
JavaScript
51 lines
1.9 KiB
JavaScript
(function () {
|
|
const root = document.documentElement;
|
|
const key = "theme";
|
|
const stored = localStorage.getItem(key);
|
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
const initial = stored || (prefersDark ? "mocha" : "latte");
|
|
root.setAttribute("data-theme", initial);
|
|
toggleChroma(initial);
|
|
|
|
const btn = document.getElementById("theme-toggle");
|
|
function updateToggleIcon(theme) {
|
|
if (!btn) return;
|
|
const isDark = theme === "mocha";
|
|
btn.textContent = isDark ? "☀️" : "🌙";
|
|
btn.setAttribute("aria-label", isDark ? "Switch to light theme" : "Switch to dark theme");
|
|
btn.setAttribute("title", isDark ? "Light theme" : "Dark theme");
|
|
}
|
|
function setTheme(next) {
|
|
root.setAttribute("data-theme", next);
|
|
localStorage.setItem(key, next);
|
|
toggleChroma(next);
|
|
updateToggleIcon(next);
|
|
}
|
|
function toggleChroma(theme) {
|
|
const latte = document.getElementById("chroma-latte");
|
|
const mocha = document.getElementById("chroma-mocha");
|
|
if (latte && mocha) {
|
|
if (theme === "mocha") {
|
|
mocha.removeAttribute("disabled");
|
|
latte.setAttribute("disabled", "disabled");
|
|
} else {
|
|
latte.removeAttribute("disabled");
|
|
mocha.setAttribute("disabled", "disabled");
|
|
}
|
|
}
|
|
}
|
|
updateToggleIcon(initial);
|
|
btn && btn.addEventListener("click", () => {
|
|
setTheme(root.getAttribute("data-theme") === "latte" ? "mocha" : "latte");
|
|
});
|
|
|
|
// Reading progress
|
|
const bar = document.getElementById("progress");
|
|
function onScroll() {
|
|
const t = document.documentElement;
|
|
const scrolled = (t.scrollTop / (t.scrollHeight - t.clientHeight)) * 100;
|
|
bar && (bar.style.width = scrolled + "%");
|
|
}
|
|
document.addEventListener("scroll", onScroll, { passive: true });
|
|
onScroll();
|
|
})(); |