common dark

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>
 `);
 }