dark.js ; use color not background-color

src/client/dark.js

@@ -0,0 +1,7 @@
+import {Generators} from "observablehq:stdlib";
+
+for await (const dark of Generators.dark()) {
+  const {classList} = document.body;
+  classList.toggle("dark", dark);
+  classList.toggle("light", !dark);
+}

src/client/index.js

@@ -1,5 +1,6 @@
 import "./pre.js";
 import "./sidebar.js";
 import "./toc.js";
+import "./dark.js";
 
 export {define} from "./main.js";

src/client/stdlib/generators/dark.ts

@@ -5,7 +5,7 @@ export function dark() {
   return observe((notify: (dark: boolean) => void) => {
     let dark: boolean | undefined;
     const probe = document.createElement("div");
-    probe.style.setProperty("transition-property", "background-color");
+    probe.style.setProperty("transition-property", "color");
     probe.style.setProperty("transition-duration", "0.001s");
     const changed = () => {
       const d = getComputedStyle(probe).getPropertyValue("color-scheme") === "dark";

src/render.ts

@@ -93,9 +93,6 @@ ${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>{import('${resolveImport(
-    "observablehq:stdlib"
-  )}').then(async({Generators:{dark:k}})=>{for await(let d of k()){document.body.classList.toggle("dark",d);document.body.classList.toggle("light",!d)}})}</script>
 </html>
 `);
 }