From 92e65808f8d77926a9b0db58e8bd382a1d5fd21f Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Mon, 11 Nov 2024 08:51:27 -0800 Subject: [PATCH] dark probe (#1802) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * dark probe * fix tests --------- Co-authored-by: Philippe Rivière --- src/client/stdlib/generators/dark.ts | 16 +++++++++++++--- .../_observablehq/stdlib/inputs.00000006.js | 0 .../{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 .../_observablehq/stdlib/inputs.00000006.css | 0 test/output/build/npm/index.html | 6 +++--- .../_observablehq/stdlib/inputs.00000006.js} | 0 .../{inputs.00000007.js => inputs.00000007.css} | 0 test/output/build/sql/index.html | 6 +++--- 11 files changed, 23 insertions(+), 13 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/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 @@ - + - + - +