diff --git a/src/client/stdlib/generators/dark.ts b/src/client/stdlib/generators/dark.ts
index 9996ec7d3..ae22c0e5a 100644
--- a/src/client/stdlib/generators/dark.ts
+++ b/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);
+ };
});
}
diff --git a/test/output/build/npm/_observablehq/stdlib/inputs.00000006.js b/test/output/build/duckdb/_observablehq/stdlib/inputs.00000006.js
similarity index 100%
rename from test/output/build/npm/_observablehq/stdlib/inputs.00000006.js
rename to test/output/build/duckdb/_observablehq/stdlib/inputs.00000006.js
diff --git a/test/output/build/duckdb/_observablehq/stdlib/inputs.00000006.css b/test/output/build/duckdb/_observablehq/stdlib/inputs.00000007.css
similarity index 100%
rename from test/output/build/duckdb/_observablehq/stdlib/inputs.00000006.css
rename to test/output/build/duckdb/_observablehq/stdlib/inputs.00000007.css
diff --git a/test/output/build/duckdb/index.html b/test/output/build/duckdb/index.html
index 9028d12f2..b0ceaf67b 100644
--- a/test/output/build/duckdb/index.html
+++ b/test/output/build/duckdb/index.html
@@ -8,15 +8,15 @@
-
+
-
+
-
+
diff --git a/test/output/build/npm/_import/index.4bdc071f.js b/test/output/build/npm/_import/index.4bdc071f.js
index 9b6843f78..108b15a25 100644
--- a/test/output/build/npm/_import/index.4bdc071f.js
+++ b/test/output/build/npm/_import/index.4bdc071f.js
@@ -1 +1 @@
-import "../_observablehq/stdlib/inputs.00000006.js";
+import "../_observablehq/stdlib/inputs.00000005.js";
diff --git a/test/output/build/duckdb/_observablehq/stdlib/inputs.00000007.js b/test/output/build/npm/_observablehq/stdlib/inputs.00000005.js
similarity index 100%
rename from test/output/build/duckdb/_observablehq/stdlib/inputs.00000007.js
rename to test/output/build/npm/_observablehq/stdlib/inputs.00000005.js
diff --git a/test/output/build/sql/_observablehq/stdlib/inputs.00000006.css b/test/output/build/npm/_observablehq/stdlib/inputs.00000006.css
similarity index 100%
rename from test/output/build/sql/_observablehq/stdlib/inputs.00000006.css
rename to test/output/build/npm/_observablehq/stdlib/inputs.00000006.css
diff --git a/test/output/build/npm/index.html b/test/output/build/npm/index.html
index 24dcc3f28..64771f980 100644
--- a/test/output/build/npm/index.html
+++ b/test/output/build/npm/index.html
@@ -7,15 +7,15 @@
-
+
-
+
-
+