dark/light body class

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.)
+
 <div class="tip">On macOS, you can create a menubar <a href="https://support.apple.com/guide/shortcuts-mac/intro-to-shortcuts-apdf22b0444c/mac">shortcut</a> to quickly toggle between light and dark mode. This is useful for testing.</div>
 
 <div class="tip">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 <code>light</code> or <code>dark</code>.</div>

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();
   });
 }

src/render.ts

@@ -93,6 +93,9 @@ ${preview ? `\nopen({hash: ${JSON.stringify(resolvers.hash)}, eval: (body) => ev
 ${html.unsafe(rewriteHtml(page.body, resolvers))}</main>${renderFooter(page.footer, resolvers, options)}
 </div>
 </body>
+<script type="module">import{Generators as g}from'${resolveImport(
+    "observablehq:stdlib"
+  )}';for await(const d of g.dark()){document.body.classList.toggle("dark",d),document.body.classList.toggle("light",!d)}</script>
 </html>
 `);
 }

test/output/build/404/404.html

@@ -43,4 +43,5 @@ <h1 id="page-not-found" tabindex="-1"><a class="observablehq-header-anchor" href
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/archives.posix/tar.html

@@ -81,4 +81,5 @@ <h1 id="tar" tabindex="-1"><a class="observablehq-header-anchor" href="#tar">Tar
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/archives.posix/zip.html

@@ -70,4 +70,5 @@ <h1 id="zip" tabindex="-1"><a class="observablehq-header-anchor" href="#zip">Zip
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/archives.win32/tar.html

@@ -65,4 +65,5 @@ <h1 id="tar" tabindex="-1"><a class="observablehq-header-anchor" href="#tar">Tar
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/archives.win32/zip.html

@@ -57,4 +57,5 @@ <h1 id="zip" tabindex="-1"><a class="observablehq-header-anchor" href="#zip">Zip
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/config/closed/page.html

@@ -55,4 +55,5 @@ <h1 id="a-page" tabindex="-1"><a class="observablehq-header-anchor" href="#a-pag
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/config/index.html

@@ -58,4 +58,5 @@ <h1 id="index" tabindex="-1"><a class="observablehq-header-anchor" href="#index"
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/config/one.html

@@ -54,4 +54,5 @@ <h1 id="one" tabindex="-1"><a class="observablehq-header-anchor" href="#one">One
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/config/sub/two.html

@@ -54,4 +54,5 @@ <h1 id="two" tabindex="-1"><a class="observablehq-header-anchor" href="#two">Two
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/config/toc-override.html

@@ -62,4 +62,5 @@ <h3 id="h3-section-1" tabindex="-1"><a class="observablehq-header-anchor" href="
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/config/toc.html

@@ -64,4 +64,5 @@ <h2 id="h2-script-alert-1-script-not-nice" tabindex="-1"><a class="observablehq-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/data-loaders/index.html

@@ -46,4 +46,5 @@ <h1 id="data-loader-test" tabindex="-1"><a class="observablehq-header-anchor" hr
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/draft/index.html

@@ -47,4 +47,5 @@ <h1 id="draft-test" tabindex="-1"><a class="observablehq-header-anchor" href="#d
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/draft/page-published.html

@@ -47,4 +47,5 @@ <h1 id="this-is-for-real" tabindex="-1"><a class="observablehq-header-anchor" hr
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/embed/index.html

@@ -56,4 +56,5 @@ <h1 id="embeds" tabindex="-1"><a class="observablehq-header-anchor" href="#embed
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/embed/w3c.js.html

@@ -50,4 +50,5 @@ <h1 id="w3-c-js" tabindex="-1"><a class="observablehq-header-anchor" href="#w3-c
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/fetches/foo.html

@@ -61,4 +61,5 @@ <h1 id="top" tabindex="-1"><a class="observablehq-header-anchor" href="#top">Top
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/fetches/top.html

@@ -66,4 +66,5 @@ <h1 id="top" tabindex="-1"><a class="observablehq-header-anchor" href="#top">Top
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/files/files.html

@@ -84,4 +84,5 @@
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/files/subsection/subfiles.html

@@ -66,4 +66,5 @@
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/fragments/index.html

@@ -38,4 +38,5 @@ <h1 id="display-title" tabindex="-1"><a class="observablehq-header-anchor" href=
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/imports/foo/foo.html

@@ -82,4 +82,5 @@ <h1 id="foo" tabindex="-1"><a class="observablehq-header-anchor" href="#foo">Foo
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/imports/script.html

@@ -50,4 +50,5 @@ <h1 id="scripts" tabindex="-1"><a class="observablehq-header-anchor" href="#scri
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/jsr/index.html

@@ -56,4 +56,5 @@ <h1 id="hello-jsr" tabindex="-1"><a class="observablehq-header-anchor" href="#he
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/multi/index.html

@@ -70,4 +70,5 @@ <h1 id="multi-test" tabindex="-1"><a class="observablehq-header-anchor" href="#m
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/multi/subsection/index.html

@@ -48,4 +48,5 @@ <h1 id="sub-section" tabindex="-1"><a class="observablehq-header-anchor" href="#
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/npm/index.html

@@ -43,4 +43,5 @@
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/page-loaders/hello-js.html

@@ -33,4 +33,5 @@ <h1 id="hello-java-script" tabindex="-1"><a class="observablehq-header-anchor" h
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/page-loaders/hello-ts.html

@@ -33,4 +33,5 @@ <h1 id="hello-type-script" tabindex="-1"><a class="observablehq-header-anchor" h
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/page-loaders/index.html

@@ -33,4 +33,5 @@ <h1 id="hello-shell" tabindex="-1"><a class="observablehq-header-anchor" href="#
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/index.html

@@ -60,4 +60,5 @@ <h1 id="index" tabindex="-1"><a class="observablehq-header-anchor" href="#index"
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/null.html

@@ -31,4 +31,5 @@ <h1 id="null" tabindex="-1"><a class="observablehq-header-anchor" href="#null">n
 </main>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/index.html

@@ -60,4 +60,5 @@ <h1 id="subindex" tabindex="-1"><a class="observablehq-header-anchor" href="#sub
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/page0.html

@@ -60,4 +60,5 @@ <h1 id="page-0" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/page1..10.html

@@ -59,4 +59,5 @@ <h1 id="page-1-10" tabindex="-1"><a class="observablehq-header-anchor" href="#pa
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/page1.html

@@ -60,4 +60,5 @@ <h1 id="page-1" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/page2.html

@@ -60,4 +60,5 @@ <h1 id="page-2" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/page3.html

@@ -60,4 +60,5 @@ <h1 id="page-3" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/page4.html

@@ -60,4 +60,5 @@ <h1 id="page-4" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/page5.html

@@ -60,4 +60,5 @@ <h1 id="page-5" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/page6.html

@@ -60,4 +60,5 @@ <h1 id="page-6" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/page7.html

@@ -60,4 +60,5 @@ <h1 id="page-7" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/pager/sub/page8.html

@@ -60,4 +60,5 @@ <h1 id="page-8" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/params/bar/index.html

@@ -48,4 +48,5 @@ <h1 id="hello-dir" tabindex="-1"><a class="observablehq-header-anchor" href="#he
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/params/bar/loaded.html

@@ -40,4 +40,5 @@ <h1 id="hello-bar" tabindex="-1"><a class="observablehq-header-anchor" href="#he
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/params/foo/bar.html

@@ -48,4 +48,5 @@ <h1 id="hello-param" tabindex="-1"><a class="observablehq-header-anchor" href="#
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/params/foo/index.html

@@ -48,4 +48,5 @@ <h1 id="hello-param" tabindex="-1"><a class="observablehq-header-anchor" href="#
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/scripts/index.html

@@ -48,4 +48,5 @@ <h1 id="home-page" tabindex="-1"><a class="observablehq-header-anchor" href="#ho
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/scripts/sub/index.html

@@ -48,4 +48,5 @@ <h1 id="subdirectory" tabindex="-1"><a class="observablehq-header-anchor" href="
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/search-public/page1.html

@@ -61,4 +61,5 @@ <h1 id="page-1" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/search-public/page3.html

@@ -52,4 +52,5 @@ <h1 id="this-page-is-not-indexable" tabindex="-1"><a class="observablehq-header-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/search-public/sub/page2.html

@@ -52,4 +52,5 @@ <h1 id="page-2" tabindex="-1"><a class="observablehq-header-anchor" href="#page-
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/simple-public/index.html

@@ -34,4 +34,5 @@ <h1 id="build-test-case" tabindex="-1"><a class="observablehq-header-anchor" hre
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/simple/simple.html

@@ -59,4 +59,5 @@ <h1 id="build-test-case" tabindex="-1"><a class="observablehq-header-anchor" hre
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/space-page/a space.html

@@ -47,4 +47,5 @@ <h1 id="a-page" tabindex="-1"><a class="observablehq-header-anchor" href="#a-pag
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/space-page/index.html

@@ -47,4 +47,5 @@ <h1 id="a-link" tabindex="-1"><a class="observablehq-header-anchor" href="#a-lin
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/subtitle/index.html

@@ -51,4 +51,5 @@ <h2 id="third-section" tabindex="-1"><a class="observablehq-header-anchor" href=
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>

test/output/build/typescript/index.html

@@ -76,4 +76,5 @@
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>