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 @@ - + - + - +