Theming done

site/src/layouts/BaseLayout.astro

@@ -50,6 +50,42 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
 
     <link rel="stylesheet" href="/styles/global.css" />
 
+    <script is:inline>
+      (() => {
+        const THEME_KEY = "site.theme";
+
+        const validate = (v) => (v === "dark" || v === "light" || v === "high-contrast" ? v : null);
+
+        const readStored = () => {
+          try {
+            return validate(window.localStorage.getItem(THEME_KEY));
+          } catch {
+            return null;
+          }
+        };
+
+        const forcedColors = () => {
+          try {
+            return window.matchMedia && window.matchMedia("(forced-colors: active)").matches;
+          } catch {
+            return false;
+          }
+        };
+
+        const prefersLight = () => {
+          try {
+            return window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
+          } catch {
+            return false;
+          }
+        };
+
+        const stored = readStored();
+        const theme = stored || (forcedColors() ? "high-contrast" : prefersLight() ? "light" : "dark");
+        document.documentElement.dataset.theme = theme;
+      })();
+    </script>
+
     {
       cfg.umami ? (
         <script async defer data-website-id={cfg.umami.websiteId} src={cfg.umami.scriptUrl} />
@@ -133,6 +169,44 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
       </nav>
     </header>
 
+    <aside class="theme-notch" aria-label="Theme" data-theme-notch data-open="false">
+      <div
+        class="theme-notch-panel"
+        id="theme-notch-panel"
+        role="radiogroup"
+        aria-label="Theme selector"
+      >
+        <button type="button" class="theme-notch-option" data-theme-option="dark" role="radio" aria-checked="false">
+          <span class="theme-notch-dot" aria-hidden="true"></span>
+          <span class="theme-notch-text">Dark</span>
+        </button>
+        <button type="button" class="theme-notch-option" data-theme-option="light" role="radio" aria-checked="false">
+          <span class="theme-notch-dot" aria-hidden="true"></span>
+          <span class="theme-notch-text">Light</span>
+        </button>
+        <button
+          type="button"
+          class="theme-notch-option"
+          data-theme-option="high-contrast"
+          role="radio"
+          aria-checked="false"
+        >
+          <span class="theme-notch-dot" aria-hidden="true"></span>
+          <span class="theme-notch-text">Contrast</span>
+        </button>
+      </div>
+      <button
+        type="button"
+        class="theme-notch-handle"
+        aria-label="Theme"
+        aria-controls="theme-notch-panel"
+        aria-expanded="false"
+        data-theme-notch-handle
+      >
+        <span class="theme-notch-glyph" aria-hidden="true">Theme</span>
+      </button>
+    </aside>
+
     <main class="container" id="main-content">
       <slot />
     </main>
@@ -208,6 +282,136 @@ const canonicalUrl = `${siteUrl}${canonicalPath.startsWith("/") ? canonicalPath
       })();
     </script>
 
+    <script is:inline>
+      (() => {
+        const THEME_KEY = "site.theme";
+
+        const validate = (v) => (v === "dark" || v === "light" || v === "high-contrast" ? v : null);
+
+        const setTheme = (next, opts) => {
+          const theme = validate(next);
+          if (!theme) return;
+
+          if (opts && opts.withTransition) {
+            document.documentElement.dataset.themeTransition = "on";
+          }
+
+          document.documentElement.dataset.theme = theme;
+
+          try {
+            window.localStorage.setItem(THEME_KEY, theme);
+          } catch {
+            // ignore
+          }
+
+          if (opts && opts.withTransition) {
+            window.setTimeout(() => {
+              delete document.documentElement.dataset.themeTransition;
+            }, 260);
+          }
+        };
+
+        const notch = document.querySelector("[data-theme-notch]");
+        const handle = document.querySelector("[data-theme-notch-handle]");
+
+        const syncRadios = (theme) => {
+          const options = document.querySelectorAll(".theme-notch-option[data-theme-option]");
+          for (let i = 0; i < options.length; i++) {
+            const el = options[i];
+            const v = el.getAttribute("data-theme-option");
+            el.setAttribute("aria-checked", v === theme ? "true" : "false");
+          }
+        };
+
+        const setOpen = (open) => {
+          if (!notch || !handle) return;
+          notch.dataset.open = open ? "true" : "false";
+          handle.setAttribute("aria-expanded", open ? "true" : "false");
+        };
+
+        const updateNotchTop = () => {
+          const header = document.querySelector(".site-header");
+          const subnav = document.querySelector(".subnav");
+          const headerRect = header ? header.getBoundingClientRect() : null;
+          const headerH = headerRect ? headerRect.height : 0;
+          let top = headerH + 12;
+
+          if (subnav) {
+            const r = subnav.getBoundingClientRect();
+            if (r.top >= 0 && r.top < headerH + 140) {
+              top = Math.max(top, r.bottom + 12);
+            }
+          }
+
+          document.documentElement.style.setProperty("--theme-notch-top", `${Math.round(top)}px`);
+        };
+
+        const initialTheme = validate(document.documentElement.dataset.theme) || "dark";
+        syncRadios(initialTheme);
+        updateNotchTop();
+
+        window.addEventListener("resize", () => updateNotchTop());
+        window.addEventListener("scroll", () => updateNotchTop(), { passive: true });
+
+        if (handle) {
+          handle.addEventListener("click", () => {
+            const open = notch && notch.dataset.open === "true";
+            setOpen(!open);
+            if (!open) {
+              const first = notch && notch.querySelector(".theme-notch-option");
+              if (first instanceof HTMLElement) first.focus({ preventScroll: true });
+            }
+          });
+        }
+
+        document.addEventListener("keydown", (e) => {
+          if (e.key === "Escape") {
+            setOpen(false);
+            if (handle) handle.focus({ preventScroll: true });
+            return;
+          }
+
+          const active = document.activeElement;
+          if (!active || !(active instanceof HTMLElement)) return;
+          if (!active.classList.contains("theme-notch-option")) return;
+          if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+          e.preventDefault();
+          const options = Array.from(
+            document.querySelectorAll(".theme-notch-option[data-theme-option]"),
+          );
+          const idx = options.indexOf(active);
+          if (idx < 0) return;
+          const dir = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1;
+          const nextEl = options[(idx + dir + options.length) % options.length];
+          nextEl.focus({ preventScroll: true });
+          const v = nextEl.getAttribute("data-theme-option");
+          setTheme(v, { withTransition: true });
+          const theme = validate(document.documentElement.dataset.theme) || "dark";
+          syncRadios(theme);
+        });
+
+        document.addEventListener("click", (e) => {
+          const t = e.target;
+          if (!t || !t.closest) return;
+
+          const opt = t.closest(".theme-notch-option[data-theme-option]");
+          if (opt) {
+            const next = opt.getAttribute("data-theme-option");
+            setTheme(next, { withTransition: true });
+            const active = validate(document.documentElement.dataset.theme) || "dark";
+            syncRadios(active);
+            return;
+          }
+
+          if (notch && notch.dataset.open === "true") {
+            if (handle && t.closest("[data-theme-notch-handle]")) return;
+            if (t.closest("[data-theme-notch]")) return;
+            setOpen(false);
+          }
+        });
+      })();
+    </script>
+
     <script is:inline>
       (() => {
         function reveal(img) {