From 1979086e70e48bd4293e1a7a1e734ce6d4cdd18c Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Wed, 6 Nov 2024 11:00:36 -0800 Subject: [PATCH 1/2] dark probe --- src/client/stdlib/generators/dark.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) 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); + }; }); } From 1175bcf851424b65db1709d8b4b29824de20a677 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 6 Nov 2024 23:25:10 +0100 Subject: [PATCH 2/2] fix tests --- .../{npm => duckdb}/_observablehq/stdlib/inputs.00000006.js | 0 .../stdlib/{inputs.00000006.css => inputs.00000007.css} | 0 test/output/build/duckdb/index.html | 6 +++--- test/output/build/npm/_import/index.4bdc071f.js | 2 +- .../_observablehq/stdlib/inputs.00000005.js} | 0 .../{sql => npm}/_observablehq/stdlib/inputs.00000006.css | 0 test/output/build/npm/index.html | 6 +++--- .../_observablehq/stdlib/inputs.00000006.js} | 0 .../stdlib/{inputs.00000007.js => inputs.00000007.css} | 0 test/output/build/sql/index.html | 6 +++--- 10 files changed, 10 insertions(+), 10 deletions(-) rename test/output/build/{npm => duckdb}/_observablehq/stdlib/inputs.00000006.js (100%) rename test/output/build/duckdb/_observablehq/stdlib/{inputs.00000006.css => inputs.00000007.css} (100%) rename test/output/build/{duckdb/_observablehq/stdlib/inputs.00000007.js => npm/_observablehq/stdlib/inputs.00000005.js} (100%) rename test/output/build/{sql => npm}/_observablehq/stdlib/inputs.00000006.css (100%) rename test/output/build/{npm/_observablehq/stdlib/inputs.00000005.css => sql/_observablehq/stdlib/inputs.00000006.js} (100%) rename test/output/build/sql/_observablehq/stdlib/{inputs.00000007.js => inputs.00000007.css} (100%) 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 @@ - + - + - +