Theme Modes

---
import Panel from "@pindoba/astro-panel";
import Button from "@pindoba/astro-button";
import Badge from "@pindoba/astro-badge";
import { css } from "@pindoba/styled-system/css";

// Each preview scopes `data-theme-mode` on its own element, so every semantic
// token inside re-resolves to that mode no matter which mode the page is in.
const modes = [
  {
    mode: "light",
    title: "Light mode",
    description: "Dark text on light surfaces, solved for contrast.",
  },
  {
    mode: "dark",
    title: "Dark mode",
    description:
      "Light text on dark surfaces, the default without the attribute.",
  },
] as const;

const feedbacks = ["success", "warning", "danger"] as const;

const grid = css({
  display: "grid",
  gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))",
  gap: "md",
});
const stack = css({ display: "flex", flexDirection: "column", gap: "sm" });
const row = css({ display: "flex", flexWrap: "wrap", gap: "xs" });
const title = css({
  fontSize: "md",
  fontWeight: "bold",
  color: "neutral.text.bold",
});
const body = css({ fontSize: "sm", color: "neutral.text" });
const muted = css({
  fontSize: "xs",
  fontFamily: "mono",
  color: "neutral.text.muted",
});
---

<div class={grid}>
  {modes.map((m) => (
    <div data-theme-mode={m.mode} data-theme-scope={m.mode}>
      <Panel emphasis="secondary" tone="neutral" padding="lg" radius="lg">
        <div class={stack}>
          <span class={muted}>data-theme-mode="{m.mode}"</span>
          <h4 class={title}>{m.title}</h4>
          <p class={body}>{m.description}</p>
          <div class={row}>
            {feedbacks.map((f) => (
              <Badge emphasis="secondary" tone={f}>
                {f}
              </Badge>
            ))}
          </div>
          <div class={row}>
            <Button emphasis="primary" size="sm">
              Primary
            </Button>
            <Button emphasis="secondary" size="sm">
              Secondary
            </Button>
          </div>
        </div>
      </Panel>
    </div>
  ))}
</div>

<div class={css({ marginTop: "md" })}>
  <div class={row}>
    <Button emphasis="secondary" size="sm" data-set-theme-mode="light">
      Switch page to light
    </Button>
    <Button emphasis="secondary" size="sm" data-set-theme-mode="dark">
      Switch page to dark
    </Button>
    <Button emphasis="ghost" size="sm" data-set-theme-mode="system">
      Follow system
    </Button>
  </div>
</div>

<script>
  import { themeModeSelectHydration } from "@pindoba/astro-theme-mode-select/runtime";
  import { setThemeMode } from "@pindoba/utils/theme-mode";

  // The dark preview can only re-resolve tokens at the root: Panda declares the
  // dark (base) variable set on `:root` and only the light override on
  // `[data-theme-mode="light"]`. So a dark preview inside a light page gets the
  // generated `:root` custom properties copied onto it, read from the
  // stylesheet rather than hardcoded.
  function rootVars(): Array<[string, string]> {
    const vars = new Map<string, string>();
    const walk = (rules: CSSRuleList) => {
      for (const rule of Array.from(rules)) {
        if (rule instanceof CSSStyleRule) {
          if (/^(:where\(:root, :host\)|:root)$/.test(rule.selectorText)) {
            for (const name of Array.from(rule.style)) {
              if (name.startsWith("--")) {
                vars.set(name, rule.style.getPropertyValue(name));
              }
            }
          }
        } else if ("cssRules" in rule) {
          walk((rule as CSSGroupingRule).cssRules);
        }
      }
    };
    for (const sheet of Array.from(document.styleSheets)) {
      try {
        walk(sheet.cssRules);
      } catch {
        // cross-origin sheet
      }
    }
    return [...vars];
  }

  const darkScopes = document.querySelectorAll<HTMLElement>(
    "[data-theme-scope='dark']",
  );
  if (darkScopes.length) {
    const vars = rootVars();
    darkScopes.forEach((el) => {
      for (const [name, value] of vars) el.style.setProperty(name, value);
    });
  }

  // Same engine the header ThemeModeSelect runs (persists "theme-mode",
  // stamps <html data-theme-mode>, broadcasts "theme-mode-change").
  function applyMode(mode: "light" | "dark" | "system") {
    const select = document.querySelector<HTMLElement>(
      "[data-theme-mode-select-config]",
    );
    const controller = select && themeModeSelectHydration.get(select);
    if (controller && "setMode" in controller) {
      (controller as { setMode(m: string): void }).setMode(mode);
    } else {
      setThemeMode(mode);
    }
  }

  document
    .querySelectorAll<HTMLElement>("[data-set-theme-mode]")
    .forEach((el) => {
      el.addEventListener("click", () => {
        const mode = el.dataset.setThemeMode;
        if (mode === "light" || mode === "dark" || mode === "system") {
          applyMode(mode);
        }
      });
    });
</script>