---
// Light/dark toggle. The initial theme is applied by an inline script in
// Base.astro before first paint; this only handles user-driven changes.
---
<button
class="icon-button theme-toggle"
type="button"
aria-label="Toggle colour theme"
title="Toggle colour theme"
>
<svg
class="theme-toggle__sun"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
></path>
</svg>
<svg
class="theme-toggle__moon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"></path>
</svg>
</button>
<script>
const KEY = 'wisp-theme';
document.querySelector<HTMLButtonElement>('.theme-toggle')?.addEventListener('click', () => {
const root = document.documentElement;
const current =
root.dataset.theme ??
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
const next = current === 'dark' ? 'light' : 'dark';
root.dataset.theme = next;
try {
localStorage.setItem(KEY, next);
} catch {
// Private browsing with storage disabled — the choice just won't persist.
}
});
</script>