dark/light body class

src/client/stdlib/generators/dark.ts

@@ -1,18 +1,21 @@
 import {observe} from "./observe.js";
 
-// Watches dark mode based on theme and user preference.
-// TODO: in preview, also watch for changes in the theme meta.
+// Watches dark mode based on the color-scheme property, that the chosen theme
+// sets.
 export function dark() {
   return observe((notify: (dark: boolean) => void) => {
     let dark: boolean | undefined;
-    const media = matchMedia("(prefers-color-scheme: dark)");
+    const probe = document.createElement("div");
+    probe.style.setProperty("transition-property", "background-color");
+    probe.style.setProperty("transition-duration", "0.001s");
     const changed = () => {
-      const d = getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark";
+      const d = getComputedStyle(probe).getPropertyValue("color-scheme") === "dark";
       if (dark === d) return; // only notify if changed
       notify((dark = d));
     };
+    document.body.append(probe);
+    probe.addEventListener("transitionstart", changed);
     changed();
-    media.addEventListener("change", changed);
-    return () => media.removeEventListener("change", changed);
+    return () => probe.remove();
   });
 }

src/render.ts

@@ -93,9 +93,9 @@ ${preview ? `\nopen({hash: ${JSON.stringify(resolvers.hash)}, eval: (body) => ev
 ${html.unsafe(rewriteHtml(page.body, resolvers))}</main>${renderFooter(page.footer, resolvers, options)}
 </div>
 </body>
-<script>{${html.unsafe(
-    (await rollupClient(getClientPath("dark-init.js"), options.root, path, {resolveImport, minify: true})).trim()
-  )}}</script>
+<script type="module">import{Generators as g}from'${resolveImport(
+    "observablehq:stdlib"
+  )}';for await(const d of g.dark()){document.body.classList.toggle("dark",d),document.body.classList.toggle("light",!d)}</script>
 </html>
 `);
 }