---
// 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>
