dark probe (#1802)

* dark probe

* fix tests

---------

Co-authored-by: Philippe Rivière <[email protected]>

Author: mbostock

src/client/stdlib/generators/dark.ts

@@ -1,18 +1,28 @@
 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.
 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.transitionProperty = "color, background-color";
+    probe.style.transitionDuration = "1ms";
     const changed = () => {
-      const d = getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark";
+      const s = getComputedStyle(document.body).getPropertyValue("color-scheme").split(/\s+/);
+      let d: boolean;
+      if (s.includes("light") && s.includes("dark")) d = media.matches;
+      else d = s.includes("dark");
       if (dark === d) return; // only notify if changed
       notify((dark = d));
     };
+    document.body.appendChild(probe);
     changed();
+    probe.addEventListener("transitionstart", changed);
     media.addEventListener("change", changed);
-    return () => media.removeEventListener("change", changed);
+    return () => {
+      probe.removeEventListener("transitionstart", changed);
+      media.removeEventListener("change", changed);
+    };
   });
 }

test/output/build/npm/_observablehq/stdlib/inputs.00000006.js renamed to test/output/build/duckdb/_observablehq/stdlib/inputs.00000006.js

@@ -8,15 +8,15 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&amp;display=swap" crossorigin>
 <link rel="preload" as="style" href="./_observablehq/theme-air,near-midnight.00000004.css">
-<link rel="preload" as="style" href="./_observablehq/stdlib/inputs.00000006.css">
+<link rel="preload" as="style" href="./_observablehq/stdlib/inputs.00000007.css">
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&amp;display=swap" crossorigin>
 <link rel="stylesheet" type="text/css" href="./_observablehq/theme-air,near-midnight.00000004.css">
-<link rel="stylesheet" type="text/css" href="./_observablehq/stdlib/inputs.00000006.css">
+<link rel="stylesheet" type="text/css" href="./_observablehq/stdlib/inputs.00000007.css">
 <link rel="modulepreload" href="./_observablehq/client.00000001.js">
 <link rel="modulepreload" href="./_observablehq/runtime.00000002.js">
 <link rel="modulepreload" href="./_observablehq/stdlib.00000003.js">
 <link rel="modulepreload" href="./_observablehq/stdlib/duckdb.00000005.js">
-<link rel="modulepreload" href="./_observablehq/stdlib/inputs.00000007.js">
+<link rel="modulepreload" href="./_observablehq/stdlib/inputs.00000006.js">
 <link rel="modulepreload" href="./_npm/@duckdb/[email protected]/cd372fb8.js">
 <link rel="modulepreload" href="./_npm/[email protected]/cd372fb8.js">
 <link rel="modulepreload" href="./_npm/[email protected]/cd372fb8.js">

test/output/build/duckdb/_observablehq/stdlib/inputs.00000006.css renamed to test/output/build/duckdb/_observablehq/stdlib/inputs.00000007.css

@@ -1 +1 @@
-import "../_observablehq/stdlib/inputs.00000006.js";
+import "../_observablehq/stdlib/inputs.00000005.js";

test/output/build/duckdb/index.html

@@ -7,15 +7,15 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&amp;display=swap" crossorigin>
 <link rel="preload" as="style" href="./_observablehq/theme-air,near-midnight.00000004.css">
-<link rel="preload" as="style" href="./_observablehq/stdlib/inputs.00000005.css">
+<link rel="preload" as="style" href="./_observablehq/stdlib/inputs.00000006.css">
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&amp;display=swap" crossorigin>
 <link rel="stylesheet" type="text/css" href="./_observablehq/theme-air,near-midnight.00000004.css">
-<link rel="stylesheet" type="text/css" href="./_observablehq/stdlib/inputs.00000005.css">
+<link rel="stylesheet" type="text/css" href="./_observablehq/stdlib/inputs.00000006.css">
 <link rel="modulepreload" href="./_observablehq/client.00000001.js">
 <link rel="modulepreload" href="./_observablehq/runtime.00000002.js">
 <link rel="modulepreload" href="./_observablehq/stdlib.00000003.js">
 <link rel="modulepreload" href="./_import/index.4bdc071f.js">
-<link rel="modulepreload" href="./_observablehq/stdlib/inputs.00000006.js">
+<link rel="modulepreload" href="./_observablehq/stdlib/inputs.00000005.js">
 <link rel="modulepreload" href="./_npm/[email protected]/cd372fb8.js">
 <link rel="modulepreload" href="./_npm/[email protected]/cd372fb8.js">
 <script type="module">