62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
// ── Theme Toggle ──
|
|
// Dark mode is the default. No data-theme attribute means dark mode.
|
|
// Light mode is [data-theme="light"].
|
|
|
|
(function () {
|
|
const STORAGE_KEY = "arcline-theme";
|
|
const LIGHT = "light";
|
|
const DARK = "dark";
|
|
|
|
function applyTheme(theme) {
|
|
if (theme === LIGHT) {
|
|
document.documentElement.setAttribute("data-theme", LIGHT);
|
|
} else {
|
|
document.documentElement.removeAttribute("data-theme");
|
|
}
|
|
}
|
|
|
|
// Read saved preference, default to dark
|
|
function getSavedTheme() {
|
|
try {
|
|
const stored = localStorage.getItem(STORAGE_KEY);
|
|
if (stored === LIGHT || stored === DARK) return stored;
|
|
} catch (_) {
|
|
// localStorage unavailable — ignore
|
|
}
|
|
return DARK;
|
|
}
|
|
|
|
function saveTheme(theme) {
|
|
try {
|
|
localStorage.setItem(STORAGE_KEY, theme);
|
|
} catch (_) {
|
|
// localStorage unavailable — ignore
|
|
}
|
|
}
|
|
|
|
// Apply the saved theme immediately (before page render)
|
|
const current = getSavedTheme();
|
|
applyTheme(current);
|
|
|
|
// Wire up toggle button(s) once the DOM is ready
|
|
function initToggle() {
|
|
const buttons = document.querySelectorAll("[data-theme-toggle]");
|
|
buttons.forEach(function (btn) {
|
|
btn.addEventListener("click", function () {
|
|
const next = document.documentElement.hasAttribute("data-theme")
|
|
? DARK
|
|
: LIGHT;
|
|
applyTheme(next);
|
|
saveTheme(next);
|
|
});
|
|
});
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", initToggle);
|
|
} else {
|
|
initToggle();
|
|
}
|
|
})();
|
|
|