Skip to content

Commit

Permalink
dark probe (#1802)
Browse files Browse the repository at this point in the history
* dark probe

* fix tests

---------

Co-authored-by: Philippe Rivière <fil@rezo.net>
  • Loading branch information
mbostock and Fil authored Nov 11, 2024
1 parent 324c7eb commit 92e6580
Show file tree
Hide file tree
Showing 11 changed files with 23 additions and 13 deletions.
16 changes: 13 additions & 3 deletions src/client/stdlib/generators/dark.ts
Original file line number Diff line number Diff line change
@@ -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);
};
});
}
6 changes: 3 additions & 3 deletions test/output/build/duckdb/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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/duckdb-wasm@1.29.0/cd372fb8.js">
<link rel="modulepreload" href="./_npm/htl@0.3.1/cd372fb8.js">
<link rel="modulepreload" href="./_npm/isoformat@0.2.1/cd372fb8.js">
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/npm/_import/index.4bdc071f.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
import "../_observablehq/stdlib/inputs.00000006.js";
import "../_observablehq/stdlib/inputs.00000005.js";
6 changes: 3 additions & 3 deletions test/output/build/npm/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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/htl@0.3.1/cd372fb8.js">
<link rel="modulepreload" href="./_npm/isoformat@0.2.1/cd372fb8.js">
<script type="module">
Expand Down
6 changes: 3 additions & 3 deletions test/output/build/sql/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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.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/duckdb-wasm@1.29.0/cd372fb8.js">
<link rel="modulepreload" href="./_npm/htl@0.3.1/cd372fb8.js">
<link rel="modulepreload" href="./_npm/isoformat@0.2.1/cd372fb8.js">
Expand Down

0 comments on commit 92e6580

Please sign in to comment.