`theme.js`

60 lines
// Malden House — theme switcher
const THEMES = {
  1: { name: "Editorial" },
  2: { name: "Sunbaked" },
  3: { name: "LA Eclipse" },
  4: { name: "Monograph" },
  5: { name: "Retro '84" },
  6: { name: "Postcard" },
  7: { name: "Arch Mono" },
  8: { name: "Block Sport" },
  9: { name: "Citrus Grove" },
  10: { name: "Blueprint" },
};

const html = document.documentElement;
const toggle = document.getElementById("switcher-toggle");
const panel = document.getElementById("switcher-panel");
const num = document.getElementById("switcher-num");
const name = document.getElementById("switcher-name");
const chips = document.querySelectorAll(".chip[data-set]");

function apply(n) {
  const t = THEMES[n]; if (!t) return;
  html.setAttribute("data-theme", n);
  num.textContent = String(n).padStart(2, "0");
  name.textContent = t.name;
  chips.forEach(c => c.classList.toggle("active", c.dataset.set === String(n)));
  try { localStorage.setItem("malden-theme", n); } catch (e) {}
}

toggle.addEventListener("click", () => {
  const open = !panel.hasAttribute("hidden");
  if (open) { panel.setAttribute("hidden", ""); toggle.setAttribute("aria-expanded", "false"); }
  else { panel.removeAttribute("hidden"); toggle.setAttribute("aria-expanded", "true"); }
});

document.addEventListener("click", e => {
  if (!panel.hasAttribute("hidden") && !e.target.closest(".switcher")) {
    panel.setAttribute("hidden", ""); toggle.setAttribute("aria-expanded", "false");
  }
});

chips.forEach(c => c.addEventListener("click", () => apply(c.dataset.set)));

// Keyboard: 1-9 sets themes 1-9, 0 sets 10
document.addEventListener("keydown", e => {
  if (e.target.closest("input, textarea")) return;
  if (e.key >= "1" && e.key <= "9") apply(Number(e.key));
  else if (e.key === "0") apply(10);
  else if (e.key === "[") apply(Math.max(1, Number(html.dataset.theme) - 1));
  else if (e.key === "]") apply(Math.min(10, Number(html.dataset.theme) + 1));
});

// Restore preference
try {
  const saved = Number(localStorage.getItem("malden-theme"));
  if (saved >= 1 && saved <= 10) apply(saved);
  else apply(1);
} catch (e) { apply(1); }