From eb0be3cb5617d7d8fa982d33b4e9397d14a78895 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Fri, 25 Oct 2024 20:21:31 +0200 Subject: [PATCH 01/11] dark/light body class --- docs/themes.md.ts | 2 ++ src/client/dark-init.ts | 11 +++++++++++ src/render.ts | 3 +++ 3 files changed, 16 insertions(+) create mode 100644 src/client/dark-init.ts diff --git a/docs/themes.md.ts b/docs/themes.md.ts index 7f4d347de..1a8d6d23d 100644 --- a/docs/themes.md.ts +++ b/docs/themes.md.ts @@ -101,6 +101,8 @@ ${themes.dark.map((theme) => `- \`${theme}\`${theme === dark ? " (default)" : "" When both a light and a dark mode theme are specified, theme styles are applied selectively based on the user’s preferred color scheme. This is implemented via [\`prefers-color-scheme\`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) and typically relies on the user’s operating system settings. +Light themes set the [color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) property to \`light\`, and dark themes set it to \`dark\`. This property is reflected as a \`light\` or \`dark\` class added to the page’s \`body\` element, allowing you to use the \`.light\` and \`.dark\` CSS selectors. (See also the [dark](./lib/generators#dark) generator.) +
On macOS, you can create a menubar shortcut to quickly toggle between light and dark mode. This is useful for testing.
Designing charts that work well in both light and dark mode can be challenging. If you’d prefer to design for only one mode, set the theme explicitly to light or dark.
diff --git a/src/client/dark-init.ts b/src/client/dark-init.ts new file mode 100644 index 000000000..c1300795a --- /dev/null +++ b/src/client/dark-init.ts @@ -0,0 +1,11 @@ +const probe = document.createElement("div"); +probe.style.setProperty("transition-property", "color"); +probe.style.setProperty("transition-duration", "0.001s"); +const update = () => { + const dark = getComputedStyle(probe)["color-scheme"]; + document.body.classList.toggle("dark", dark); + document.body.classList.toggle("light", !dark); +}; +update(); +probe.addEventListener("transitionstart", update); +document.body.append(probe); diff --git a/src/render.ts b/src/render.ts index 309d4b1ef..c9f8be802 100644 --- a/src/render.ts +++ b/src/render.ts @@ -93,6 +93,9 @@ ${preview ? `\nopen({hash: ${JSON.stringify(resolvers.hash)}, eval: (body) => ev ${html.unsafe(rewriteHtml(page.body, resolvers))}${renderFooter(page.footer, resolvers, options)} + `); } From 907a7cb0f82889d157e4eb7796ff5583127ebac4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 28 Oct 2024 10:30:44 +0100 Subject: [PATCH 02/11] fix tests --- test/output/build/404/404.html | 1 + test/output/build/archives.posix/tar.html | 1 + test/output/build/archives.posix/zip.html | 1 + test/output/build/archives.win32/tar.html | 1 + test/output/build/archives.win32/zip.html | 1 + test/output/build/config/closed/page.html | 1 + test/output/build/config/index.html | 1 + test/output/build/config/one.html | 1 + test/output/build/config/sub/two.html | 1 + test/output/build/config/toc-override.html | 1 + test/output/build/config/toc.html | 1 + test/output/build/data-loaders/index.html | 1 + test/output/build/draft/index.html | 1 + test/output/build/draft/page-published.html | 1 + test/output/build/embed/index.html | 1 + test/output/build/embed/w3c.js.html | 1 + test/output/build/fetches/foo.html | 1 + test/output/build/fetches/top.html | 1 + test/output/build/files/files.html | 1 + test/output/build/files/subsection/subfiles.html | 1 + test/output/build/fragments/index.html | 1 + test/output/build/imports/foo/foo.html | 1 + test/output/build/imports/script.html | 1 + test/output/build/jsr/index.html | 1 + test/output/build/multi/index.html | 1 + test/output/build/multi/subsection/index.html | 1 + test/output/build/npm/index.html | 1 + test/output/build/page-loaders/hello-js.html | 1 + test/output/build/page-loaders/hello-ts.html | 1 + test/output/build/page-loaders/index.html | 1 + test/output/build/pager/index.html | 1 + test/output/build/pager/null.html | 1 + test/output/build/pager/sub/index.html | 1 + test/output/build/pager/sub/page0.html | 1 + test/output/build/pager/sub/page1..10.html | 1 + test/output/build/pager/sub/page1.html | 1 + test/output/build/pager/sub/page2.html | 1 + test/output/build/pager/sub/page3.html | 1 + test/output/build/pager/sub/page4.html | 1 + test/output/build/pager/sub/page5.html | 1 + test/output/build/pager/sub/page6.html | 1 + test/output/build/pager/sub/page7.html | 1 + test/output/build/pager/sub/page8.html | 1 + test/output/build/params/bar/index.html | 1 + test/output/build/params/bar/loaded.html | 1 + test/output/build/params/foo/bar.html | 1 + test/output/build/params/foo/index.html | 1 + test/output/build/scripts/index.html | 1 + test/output/build/scripts/sub/index.html | 1 + test/output/build/search-public/page1.html | 1 + test/output/build/search-public/page3.html | 1 + test/output/build/search-public/sub/page2.html | 1 + test/output/build/simple-public/index.html | 1 + test/output/build/simple/simple.html | 1 + test/output/build/space-page/a space.html | 1 + test/output/build/space-page/index.html | 1 + test/output/build/subtitle/index.html | 1 + test/output/build/typescript/index.html | 1 + 58 files changed, 58 insertions(+) diff --git a/test/output/build/404/404.html b/test/output/build/404/404.html index de7987e63..20d237105 100644 --- a/test/output/build/404/404.html +++ b/test/output/build/404/404.html @@ -43,4 +43,5 @@

+ diff --git a/test/output/build/archives.posix/tar.html b/test/output/build/archives.posix/tar.html index df09c13b5..9f3028b95 100644 --- a/test/output/build/archives.posix/tar.html +++ b/test/output/build/archives.posix/tar.html @@ -81,4 +81,5 @@

Tar + diff --git a/test/output/build/archives.posix/zip.html b/test/output/build/archives.posix/zip.html index 43e7d4c9f..1cbf4b11e 100644 --- a/test/output/build/archives.posix/zip.html +++ b/test/output/build/archives.posix/zip.html @@ -70,4 +70,5 @@

Zip + diff --git a/test/output/build/archives.win32/tar.html b/test/output/build/archives.win32/tar.html index 84a2603d5..81a14275e 100644 --- a/test/output/build/archives.win32/tar.html +++ b/test/output/build/archives.win32/tar.html @@ -65,4 +65,5 @@

Tar + diff --git a/test/output/build/archives.win32/zip.html b/test/output/build/archives.win32/zip.html index 62f0b5d73..a8b33ef31 100644 --- a/test/output/build/archives.win32/zip.html +++ b/test/output/build/archives.win32/zip.html @@ -57,4 +57,5 @@

Zip + diff --git a/test/output/build/config/closed/page.html b/test/output/build/config/closed/page.html index c0c97fd67..e41176d85 100644 --- a/test/output/build/config/closed/page.html +++ b/test/output/build/config/closed/page.html @@ -55,4 +55,5 @@

+ diff --git a/test/output/build/config/one.html b/test/output/build/config/one.html index 447733c3f..93a1347c7 100644 --- a/test/output/build/config/one.html +++ b/test/output/build/config/one.html @@ -54,4 +54,5 @@

One + diff --git a/test/output/build/config/sub/two.html b/test/output/build/config/sub/two.html index 72b3305cd..6d6e9d761 100644 --- a/test/output/build/config/sub/two.html +++ b/test/output/build/config/sub/two.html @@ -54,4 +54,5 @@

Two + diff --git a/test/output/build/config/toc-override.html b/test/output/build/config/toc-override.html index 7d24d3a00..819821528 100644 --- a/test/output/build/config/toc-override.html +++ b/test/output/build/config/toc-override.html @@ -62,4 +62,5 @@

+ diff --git a/test/output/build/draft/index.html b/test/output/build/draft/index.html index 66fe80918..602c4481b 100644 --- a/test/output/build/draft/index.html +++ b/test/output/build/draft/index.html @@ -47,4 +47,5 @@

+ diff --git a/test/output/build/embed/index.html b/test/output/build/embed/index.html index 8720d8089..a04357efb 100644 --- a/test/output/build/embed/index.html +++ b/test/output/build/embed/index.html @@ -56,4 +56,5 @@

Top + diff --git a/test/output/build/fetches/top.html b/test/output/build/fetches/top.html index 9f8a0d89a..997d99caf 100644 --- a/test/output/build/fetches/top.html +++ b/test/output/build/fetches/top.html @@ -66,4 +66,5 @@

Top + diff --git a/test/output/build/files/files.html b/test/output/build/files/files.html index f509c3cb7..0d9af907e 100644 --- a/test/output/build/files/files.html +++ b/test/output/build/files/files.html @@ -84,4 +84,5 @@ + diff --git a/test/output/build/files/subsection/subfiles.html b/test/output/build/files/subsection/subfiles.html index dfbb3706e..a82285e6a 100644 --- a/test/output/build/files/subsection/subfiles.html +++ b/test/output/build/files/subsection/subfiles.html @@ -66,4 +66,5 @@ + diff --git a/test/output/build/fragments/index.html b/test/output/build/fragments/index.html index 2fd27358b..b188370ff 100644 --- a/test/output/build/fragments/index.html +++ b/test/output/build/fragments/index.html @@ -38,4 +38,5 @@

+ diff --git a/test/output/build/imports/foo/foo.html b/test/output/build/imports/foo/foo.html index 2cae2575d..5707c62b5 100644 --- a/test/output/build/imports/foo/foo.html +++ b/test/output/build/imports/foo/foo.html @@ -82,4 +82,5 @@

Foo + diff --git a/test/output/build/imports/script.html b/test/output/build/imports/script.html index e40c12e68..18f11734b 100644 --- a/test/output/build/imports/script.html +++ b/test/output/build/imports/script.html @@ -50,4 +50,5 @@

+ diff --git a/test/output/build/page-loaders/hello-ts.html b/test/output/build/page-loaders/hello-ts.html index 676df53ec..a102d709a 100644 --- a/test/output/build/page-loaders/hello-ts.html +++ b/test/output/build/page-loaders/hello-ts.html @@ -33,4 +33,5 @@

+ diff --git a/test/output/build/page-loaders/index.html b/test/output/build/page-loaders/index.html index 10e853399..1c56d56bf 100644 --- a/test/output/build/page-loaders/index.html +++ b/test/output/build/page-loaders/index.html @@ -33,4 +33,5 @@

+ diff --git a/test/output/build/pager/null.html b/test/output/build/pager/null.html index 1e59931e0..7080e2396 100644 --- a/test/output/build/pager/null.html +++ b/test/output/build/pager/null.html @@ -31,4 +31,5 @@

n + diff --git a/test/output/build/pager/sub/index.html b/test/output/build/pager/sub/index.html index b56cff4e5..0d4357662 100644 --- a/test/output/build/pager/sub/index.html +++ b/test/output/build/pager/sub/index.html @@ -60,4 +60,5 @@

+ diff --git a/test/output/build/simple/simple.html b/test/output/build/simple/simple.html index 2aa5d2eaf..157c270fa 100644 --- a/test/output/build/simple/simple.html +++ b/test/output/build/simple/simple.html @@ -59,4 +59,5 @@

+ diff --git a/test/output/build/space-page/a space.html b/test/output/build/space-page/a space.html index 5f5667cd2..7acd6f0ab 100644 --- a/test/output/build/space-page/a space.html +++ b/test/output/build/space-page/a space.html @@ -47,4 +47,5 @@

+ diff --git a/test/output/build/typescript/index.html b/test/output/build/typescript/index.html index 6365f5ee7..414320e2c 100644 --- a/test/output/build/typescript/index.html +++ b/test/output/build/typescript/index.html @@ -76,4 +76,5 @@ + From 90fa91a01e30dc18d1df3bb9040e8b8a56a0bbe2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 6 Nov 2024 14:36:05 +0100 Subject: [PATCH 03/11] common dark --- src/client/dark-init.ts | 11 ----------- src/client/stdlib/generators/dark.ts | 15 +++++++++------ src/render.ts | 6 +++--- 3 files changed, 12 insertions(+), 20 deletions(-) delete mode 100644 src/client/dark-init.ts diff --git a/src/client/dark-init.ts b/src/client/dark-init.ts deleted file mode 100644 index c1300795a..000000000 --- a/src/client/dark-init.ts +++ /dev/null @@ -1,11 +0,0 @@ -const probe = document.createElement("div"); -probe.style.setProperty("transition-property", "color"); -probe.style.setProperty("transition-duration", "0.001s"); -const update = () => { - const dark = getComputedStyle(probe)["color-scheme"]; - document.body.classList.toggle("dark", dark); - document.body.classList.toggle("light", !dark); -}; -update(); -probe.addEventListener("transitionstart", update); -document.body.append(probe); diff --git a/src/client/stdlib/generators/dark.ts b/src/client/stdlib/generators/dark.ts index 9996ec7d3..e90199c5f 100644 --- a/src/client/stdlib/generators/dark.ts +++ b/src/client/stdlib/generators/dark.ts @@ -1,18 +1,21 @@ 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. +// Watches dark mode based on the color-scheme property, that the chosen theme +// sets. 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.setProperty("transition-property", "background-color"); + probe.style.setProperty("transition-duration", "0.001s"); const changed = () => { - const d = getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark"; + const d = getComputedStyle(probe).getPropertyValue("color-scheme") === "dark"; if (dark === d) return; // only notify if changed notify((dark = d)); }; + document.body.append(probe); + probe.addEventListener("transitionstart", changed); changed(); - media.addEventListener("change", changed); - return () => media.removeEventListener("change", changed); + return () => probe.remove(); }); } diff --git a/src/render.ts b/src/render.ts index c9f8be802..ca2ce7157 100644 --- a/src/render.ts +++ b/src/render.ts @@ -93,9 +93,9 @@ ${preview ? `\nopen({hash: ${JSON.stringify(resolvers.hash)}, eval: (body) => ev ${html.unsafe(rewriteHtml(page.body, resolvers))}${renderFooter(page.footer, resolvers, options)} - + `); } From 6decacf6cb17a178267c3f39144f1830242b1a22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 6 Nov 2024 15:30:33 +0100 Subject: [PATCH 04/11] fix comment --- src/client/stdlib/generators/dark.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/client/stdlib/generators/dark.ts b/src/client/stdlib/generators/dark.ts index e90199c5f..caa7a578c 100644 --- a/src/client/stdlib/generators/dark.ts +++ b/src/client/stdlib/generators/dark.ts @@ -1,7 +1,6 @@ import {observe} from "./observe.js"; -// Watches dark mode based on the color-scheme property, that the chosen theme -// sets. +// Watches dark mode based on the color-scheme set by the current theme. export function dark() { return observe((notify: (dark: boolean) => void) => { let dark: boolean | undefined; From c0ba4545e6de1ff167b178386d7c0f6e82ad942b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 6 Nov 2024 16:13:07 +0100 Subject: [PATCH 05/11] redacted script, optimized --- src/render.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/render.ts b/src/render.ts index ca2ce7157..09baf03b6 100644 --- a/src/render.ts +++ b/src/render.ts @@ -93,9 +93,9 @@ ${preview ? `\nopen({hash: ${JSON.stringify(resolvers.hash)}, eval: (body) => ev ${html.unsafe(rewriteHtml(page.body, resolvers))}${renderFooter(page.footer, resolvers, options)} - + )}').then(async({Generators:{dark:k}})=>{for await(let d of k()){document.body.classList.toggle("dark",d),document.body.classList.toggle("light",!d)}})} `); } From afa6703f9d469b49f15dc9f579fa493119a6c7b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 6 Nov 2024 16:13:17 +0100 Subject: [PATCH 06/11] fix tests --- test/output/build/duckdb/index.html | 1 + test/output/build/sql/index.html | 1 + 2 files changed, 2 insertions(+) diff --git a/test/output/build/duckdb/index.html b/test/output/build/duckdb/index.html index 9028d12f2..e5eb6f100 100644 --- a/test/output/build/duckdb/index.html +++ b/test/output/build/duckdb/index.html @@ -45,4 +45,5 @@

{for await(let d of k()){document.body.classList.toggle("dark",d),document.body.classList.toggle("light",!d)}})} + )}').then(async({Generators:{dark:k}})=>{for await(let d of k()){document.body.classList.toggle("dark",d);document.body.classList.toggle("light",!d)}})} `); } From bcab913d6975279717631dda3e4bfea493e23c0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 6 Nov 2024 18:50:28 +0100 Subject: [PATCH 08/11] dark.js ; use color not background-color --- src/client/dark.js | 7 +++++++ src/client/index.js | 1 + src/client/stdlib/generators/dark.ts | 2 +- src/render.ts | 3 --- 4 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 src/client/dark.js diff --git a/src/client/dark.js b/src/client/dark.js new file mode 100644 index 000000000..22543aabc --- /dev/null +++ b/src/client/dark.js @@ -0,0 +1,7 @@ +import {Generators} from "observablehq:stdlib"; + +for await (const dark of Generators.dark()) { + const {classList} = document.body; + classList.toggle("dark", dark); + classList.toggle("light", !dark); +} diff --git a/src/client/index.js b/src/client/index.js index a0585a6a7..a74432ea9 100644 --- a/src/client/index.js +++ b/src/client/index.js @@ -1,5 +1,6 @@ import "./pre.js"; import "./sidebar.js"; import "./toc.js"; +import "./dark.js"; export {define} from "./main.js"; diff --git a/src/client/stdlib/generators/dark.ts b/src/client/stdlib/generators/dark.ts index caa7a578c..97dfcba0d 100644 --- a/src/client/stdlib/generators/dark.ts +++ b/src/client/stdlib/generators/dark.ts @@ -5,7 +5,7 @@ export function dark() { return observe((notify: (dark: boolean) => void) => { let dark: boolean | undefined; const probe = document.createElement("div"); - probe.style.setProperty("transition-property", "background-color"); + probe.style.setProperty("transition-property", "color"); probe.style.setProperty("transition-duration", "0.001s"); const changed = () => { const d = getComputedStyle(probe).getPropertyValue("color-scheme") === "dark"; diff --git a/src/render.ts b/src/render.ts index 017ae4517..309d4b1ef 100644 --- a/src/render.ts +++ b/src/render.ts @@ -93,9 +93,6 @@ ${preview ? `\nopen({hash: ${JSON.stringify(resolvers.hash)}, eval: (body) => ev ${html.unsafe(rewriteHtml(page.body, resolvers))}${renderFooter(page.footer, resolvers, options)} - `); } From 9d0cdfdcce95395e7e8d6b448c44926dc65ca6d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 6 Nov 2024 18:54:38 +0100 Subject: [PATCH 09/11] fix tests --- test/output/build/404/404.html | 1 - test/output/build/archives.posix/tar.html | 1 - test/output/build/archives.posix/zip.html | 1 - test/output/build/archives.win32/tar.html | 1 - test/output/build/archives.win32/zip.html | 1 - test/output/build/config/closed/page.html | 1 - test/output/build/config/index.html | 1 - test/output/build/config/one.html | 1 - test/output/build/config/sub/two.html | 1 - test/output/build/config/toc-override.html | 1 - test/output/build/config/toc.html | 1 - test/output/build/data-loaders/index.html | 1 - test/output/build/draft/index.html | 1 - test/output/build/draft/page-published.html | 1 - .../_observablehq/stdlib/inputs.00000006.js | 0 .../stdlib/{inputs.00000006.css => inputs.00000007.css} | 0 test/output/build/duckdb/index.html | 7 +++---- test/output/build/embed/index.html | 1 - test/output/build/embed/w3c.js.html | 1 - test/output/build/fetches/foo.html | 1 - test/output/build/fetches/top.html | 1 - test/output/build/files/files.html | 1 - test/output/build/files/subsection/subfiles.html | 1 - test/output/build/fragments/index.html | 1 - test/output/build/imports/foo/foo.html | 1 - test/output/build/imports/script.html | 1 - test/output/build/jsr/index.html | 1 - test/output/build/multi/index.html | 1 - test/output/build/multi/subsection/index.html | 1 - 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 | 7 +++---- test/output/build/page-loaders/hello-js.html | 1 - test/output/build/page-loaders/hello-ts.html | 1 - test/output/build/page-loaders/index.html | 1 - test/output/build/pager/index.html | 1 - test/output/build/pager/null.html | 1 - test/output/build/pager/sub/index.html | 1 - test/output/build/pager/sub/page0.html | 1 - test/output/build/pager/sub/page1..10.html | 1 - test/output/build/pager/sub/page1.html | 1 - test/output/build/pager/sub/page2.html | 1 - test/output/build/pager/sub/page3.html | 1 - test/output/build/pager/sub/page4.html | 1 - test/output/build/pager/sub/page5.html | 1 - test/output/build/pager/sub/page6.html | 1 - test/output/build/pager/sub/page7.html | 1 - test/output/build/pager/sub/page8.html | 1 - test/output/build/params/bar/index.html | 1 - test/output/build/params/bar/loaded.html | 1 - test/output/build/params/foo/bar.html | 1 - test/output/build/params/foo/index.html | 1 - test/output/build/scripts/index.html | 1 - test/output/build/scripts/sub/index.html | 1 - test/output/build/search-public/page1.html | 1 - test/output/build/search-public/page3.html | 1 - test/output/build/search-public/sub/page2.html | 1 - test/output/build/simple-public/index.html | 1 - test/output/build/simple/simple.html | 1 - test/output/build/space-page/a space.html | 1 - test/output/build/space-page/index.html | 1 - .../_observablehq/stdlib/inputs.00000006.js} | 0 .../stdlib/{inputs.00000007.js => inputs.00000007.css} | 0 test/output/build/sql/index.html | 7 +++---- test/output/build/subtitle/index.html | 1 - test/output/build/typescript/index.html | 1 - 67 files changed, 10 insertions(+), 70 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/404/404.html b/test/output/build/404/404.html index 20d237105..de7987e63 100644 --- a/test/output/build/404/404.html +++ b/test/output/build/404/404.html @@ -43,5 +43,4 @@

- diff --git a/test/output/build/archives.posix/tar.html b/test/output/build/archives.posix/tar.html index 9f3028b95..df09c13b5 100644 --- a/test/output/build/archives.posix/tar.html +++ b/test/output/build/archives.posix/tar.html @@ -81,5 +81,4 @@

Tar - diff --git a/test/output/build/archives.posix/zip.html b/test/output/build/archives.posix/zip.html index 1cbf4b11e..43e7d4c9f 100644 --- a/test/output/build/archives.posix/zip.html +++ b/test/output/build/archives.posix/zip.html @@ -70,5 +70,4 @@

Zip - diff --git a/test/output/build/archives.win32/tar.html b/test/output/build/archives.win32/tar.html index 81a14275e..84a2603d5 100644 --- a/test/output/build/archives.win32/tar.html +++ b/test/output/build/archives.win32/tar.html @@ -65,5 +65,4 @@

Tar - diff --git a/test/output/build/archives.win32/zip.html b/test/output/build/archives.win32/zip.html index a8b33ef31..62f0b5d73 100644 --- a/test/output/build/archives.win32/zip.html +++ b/test/output/build/archives.win32/zip.html @@ -57,5 +57,4 @@

Zip - diff --git a/test/output/build/config/closed/page.html b/test/output/build/config/closed/page.html index e41176d85..c0c97fd67 100644 --- a/test/output/build/config/closed/page.html +++ b/test/output/build/config/closed/page.html @@ -55,5 +55,4 @@

- diff --git a/test/output/build/config/one.html b/test/output/build/config/one.html index 93a1347c7..447733c3f 100644 --- a/test/output/build/config/one.html +++ b/test/output/build/config/one.html @@ -54,5 +54,4 @@

One - diff --git a/test/output/build/config/sub/two.html b/test/output/build/config/sub/two.html index 6d6e9d761..72b3305cd 100644 --- a/test/output/build/config/sub/two.html +++ b/test/output/build/config/sub/two.html @@ -54,5 +54,4 @@

Two - diff --git a/test/output/build/config/toc-override.html b/test/output/build/config/toc-override.html index 819821528..7d24d3a00 100644 --- a/test/output/build/config/toc-override.html +++ b/test/output/build/config/toc-override.html @@ -62,5 +62,4 @@

- diff --git a/test/output/build/draft/index.html b/test/output/build/draft/index.html index 602c4481b..66fe80918 100644 --- a/test/output/build/draft/index.html +++ b/test/output/build/draft/index.html @@ -47,5 +47,4 @@

- 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 e5eb6f100..b0ceaf67b 100644 --- a/test/output/build/duckdb/index.html +++ b/test/output/build/duckdb/index.html @@ -8,15 +8,15 @@ - + - + - + @@ -45,5 +45,4 @@

Top - diff --git a/test/output/build/fetches/top.html b/test/output/build/fetches/top.html index 997d99caf..9f8a0d89a 100644 --- a/test/output/build/fetches/top.html +++ b/test/output/build/fetches/top.html @@ -66,5 +66,4 @@

Top - diff --git a/test/output/build/files/files.html b/test/output/build/files/files.html index 0d9af907e..f509c3cb7 100644 --- a/test/output/build/files/files.html +++ b/test/output/build/files/files.html @@ -84,5 +84,4 @@ - diff --git a/test/output/build/files/subsection/subfiles.html b/test/output/build/files/subsection/subfiles.html index a82285e6a..dfbb3706e 100644 --- a/test/output/build/files/subsection/subfiles.html +++ b/test/output/build/files/subsection/subfiles.html @@ -66,5 +66,4 @@ - diff --git a/test/output/build/fragments/index.html b/test/output/build/fragments/index.html index b188370ff..2fd27358b 100644 --- a/test/output/build/fragments/index.html +++ b/test/output/build/fragments/index.html @@ -38,5 +38,4 @@

- diff --git a/test/output/build/imports/foo/foo.html b/test/output/build/imports/foo/foo.html index 5707c62b5..2cae2575d 100644 --- a/test/output/build/imports/foo/foo.html +++ b/test/output/build/imports/foo/foo.html @@ -82,5 +82,4 @@

Foo - diff --git a/test/output/build/imports/script.html b/test/output/build/imports/script.html index 18f11734b..e40c12e68 100644 --- a/test/output/build/imports/script.html +++ b/test/output/build/imports/script.html @@ -50,5 +50,4 @@

- + - + - + diff --git a/test/output/build/page-loaders/hello-js.html b/test/output/build/page-loaders/hello-js.html index e765be6c4..961514be5 100644 --- a/test/output/build/page-loaders/hello-js.html +++ b/test/output/build/page-loaders/hello-js.html @@ -33,5 +33,4 @@

- diff --git a/test/output/build/page-loaders/hello-ts.html b/test/output/build/page-loaders/hello-ts.html index a102d709a..676df53ec 100644 --- a/test/output/build/page-loaders/hello-ts.html +++ b/test/output/build/page-loaders/hello-ts.html @@ -33,5 +33,4 @@

- diff --git a/test/output/build/page-loaders/index.html b/test/output/build/page-loaders/index.html index 1c56d56bf..10e853399 100644 --- a/test/output/build/page-loaders/index.html +++ b/test/output/build/page-loaders/index.html @@ -33,5 +33,4 @@

- diff --git a/test/output/build/pager/null.html b/test/output/build/pager/null.html index 7080e2396..1e59931e0 100644 --- a/test/output/build/pager/null.html +++ b/test/output/build/pager/null.html @@ -31,5 +31,4 @@

n - diff --git a/test/output/build/pager/sub/index.html b/test/output/build/pager/sub/index.html index 0d4357662..b56cff4e5 100644 --- a/test/output/build/pager/sub/index.html +++ b/test/output/build/pager/sub/index.html @@ -60,5 +60,4 @@

- diff --git a/test/output/build/simple/simple.html b/test/output/build/simple/simple.html index 157c270fa..2aa5d2eaf 100644 --- a/test/output/build/simple/simple.html +++ b/test/output/build/simple/simple.html @@ -59,5 +59,4 @@

- diff --git a/test/output/build/space-page/a space.html b/test/output/build/space-page/a space.html index 7acd6f0ab..5f5667cd2 100644 --- a/test/output/build/space-page/a space.html +++ b/test/output/build/space-page/a space.html @@ -47,5 +47,4 @@

- + - + - + @@ -50,5 +50,4 @@ - diff --git a/test/output/build/subtitle/index.html b/test/output/build/subtitle/index.html index 88ea64f5c..2418992e0 100644 --- a/test/output/build/subtitle/index.html +++ b/test/output/build/subtitle/index.html @@ -51,5 +51,4 @@

- diff --git a/test/output/build/typescript/index.html b/test/output/build/typescript/index.html index 414320e2c..6365f5ee7 100644 --- a/test/output/build/typescript/index.html +++ b/test/output/build/typescript/index.html @@ -76,5 +76,4 @@ - From d3498b94b44b78fa8dbf74906a71ec5c09b1a233 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Wed, 6 Nov 2024 10:49:17 -0800 Subject: [PATCH 10/11] avoid top-level await --- src/client/dark.js | 12 +++++++----- src/client/stdlib/generators/dark.ts | 6 +++--- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/client/dark.js b/src/client/dark.js index 22543aabc..f8832e76e 100644 --- a/src/client/dark.js +++ b/src/client/dark.js @@ -1,7 +1,9 @@ import {Generators} from "observablehq:stdlib"; -for await (const dark of Generators.dark()) { - const {classList} = document.body; - classList.toggle("dark", dark); - classList.toggle("light", !dark); -} +(async () => { + for await (const dark of Generators.dark()) { + const {classList} = document.body; + classList.toggle("dark", dark); + classList.toggle("light", !dark); + } +})(); diff --git a/src/client/stdlib/generators/dark.ts b/src/client/stdlib/generators/dark.ts index 97dfcba0d..bd9457751 100644 --- a/src/client/stdlib/generators/dark.ts +++ b/src/client/stdlib/generators/dark.ts @@ -5,10 +5,10 @@ export function dark() { return observe((notify: (dark: boolean) => void) => { let dark: boolean | undefined; const probe = document.createElement("div"); - probe.style.setProperty("transition-property", "color"); - probe.style.setProperty("transition-duration", "0.001s"); + probe.style.transitionProperty = "color"; + probe.style.transitionDuration = "0.001s"; const changed = () => { - const d = getComputedStyle(probe).getPropertyValue("color-scheme") === "dark"; + const d = getComputedStyle(probe).getPropertyValue("color-scheme") === "dark"; // TODO "light dark"? if (dark === d) return; // only notify if changed notify((dark = d)); }; From 38e47e7b9a75a52bbd91f1d67ccd7f96130970f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Wed, 6 Nov 2024 23:29:02 +0100 Subject: [PATCH 11/11] revert changes in dark() --- src/client/stdlib/generators/dark.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/client/stdlib/generators/dark.ts b/src/client/stdlib/generators/dark.ts index bd9457751..9996ec7d3 100644 --- a/src/client/stdlib/generators/dark.ts +++ b/src/client/stdlib/generators/dark.ts @@ -1,20 +1,18 @@ import {observe} from "./observe.js"; -// Watches dark mode based on the color-scheme set by the current theme. +// 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 probe = document.createElement("div"); - probe.style.transitionProperty = "color"; - probe.style.transitionDuration = "0.001s"; + const media = matchMedia("(prefers-color-scheme: dark)"); const changed = () => { - const d = getComputedStyle(probe).getPropertyValue("color-scheme") === "dark"; // TODO "light dark"? + const d = getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark"; if (dark === d) return; // only notify if changed notify((dark = d)); }; - document.body.append(probe); - probe.addEventListener("transitionstart", changed); changed(); - return () => probe.remove(); + media.addEventListener("change", changed); + return () => media.removeEventListener("change", changed); }); }