---
// Theme toggle. Contract: localStorage 'theme' = "frappe" | "latte". Safe to render multiple times.
---
<button
  type="button"
  data-theme-toggle
  aria-label="Toggle theme"
  aria-pressed="false"
  class="rounded p-2 text-text hover:bg-mantle"
>
  <span data-icon="frappe">☾</span>
  <span data-icon="latte">☀</span>
</button>
<script is:inline>
  (() => {
    if (window.__themeToggleInit) return;
    window.__themeToggleInit = true;
    const root = document.documentElement;
    const btns = document.querySelectorAll("[data-theme-toggle]");
    const setPressed = () => btns.forEach((b) =>
      b.setAttribute("aria-pressed", String(root.getAttribute("data-theme") === "latte")));
    btns.forEach((b) =>
      b.addEventListener("click", () => {
        const next = root.getAttribute("data-theme") === "frappe" ? "latte" : "frappe";
        root.setAttribute("data-theme", next);
        localStorage.setItem("theme", next);
        setPressed();
      }));
    setPressed();
  })();
</script>