Enhance CDN packages and playground

Amp-Thread-ID: https://ampcode.com/threads/T-01a02485-5574-707c-bff4-5668d83bee8a Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
2026-08-22 06:21:39 +00:00
parent 7070799862
commit d95e099fa4
17 changed files with 1870 additions and 247 deletions
@@ -0,0 +1,42 @@
+(() => {
+  const key = "yawn:theme";
+  const preference = matchMedia("(prefers-color-scheme: dark)");
+  const saved = localStorage.getItem(key);
+  let mode = ["auto", "light", "dark"].includes(saved) ? saved : "auto";
+
+  const apply = () => {
+    const resolved =
+      mode === "auto" ? (preference.matches ? "dark" : "light") : mode;
+    document.documentElement.dataset.theme = resolved;
+    document.documentElement.dataset.themeMode = mode;
+    document.documentElement.style.colorScheme = resolved;
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute("content", resolved === "dark" ? "#081522" : "#f7fbff");
+    for (const select of document.querySelectorAll("[data-theme-select]"))
+      select.value = mode;
+    dispatchEvent(
+      new CustomEvent("yawn-theme-change", { detail: { mode, resolved } }),
+    );
+  };
+
+  const bind = () => {
+    for (const select of document.querySelectorAll("[data-theme-select]")) {
+      select.value = mode;
+      select.addEventListener("change", () => {
+        mode = select.value;
+        if (mode === "auto") localStorage.removeItem(key);
+        else localStorage.setItem(key, mode);
+        apply();
+      });
+    }
+  };
+
+  preference.addEventListener("change", () => {
+    if (mode === "auto") apply();
+  });
+  apply();
+  if (document.readyState === "loading")
+    addEventListener("DOMContentLoaded", bind, { once: true });
+  else bind();
+})();