observablehq · Fil · Oct 25, 2024 · Oct 28, 2024 · Nov 6, 2024 · Nov 6, 2024
diff --git 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.)
+
 <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>

diff --git a/src/client/dark-init.ts 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
@@ -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>{${html.unsafe(
+    (await rollupClient(getClientPath("dark-init.js"), options.root, path, {resolveImport, minify: true})).trim()
+  )}}</script>
 </html>
 `);
 }

diff --git a/test/output/build/404/404.html b/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>
diff --git a/test/output/build/archives.posix/tar.html b/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>
diff --git a/test/output/build/archives.posix/zip.html b/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>
diff --git a/test/output/build/archives.win32/tar.html b/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>
diff --git a/test/output/build/archives.win32/zip.html b/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>
diff --git a/test/output/build/config/closed/page.html b/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>
diff --git a/test/output/build/config/index.html b/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>
diff --git a/test/output/build/config/one.html b/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>
diff --git a/test/output/build/config/sub/two.html b/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>
diff --git a/test/output/build/config/toc-override.html b/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>
diff --git a/test/output/build/config/toc.html b/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>
diff --git a/test/output/build/data-loaders/index.html b/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>
diff --git a/test/output/build/draft/index.html b/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>
diff --git a/test/output/build/draft/page-published.html b/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>
diff --git a/test/output/build/embed/index.html b/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>
diff --git a/test/output/build/embed/w3c.js.html b/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>
diff --git a/test/output/build/fetches/foo.html b/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>
diff --git a/test/output/build/fetches/top.html b/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>
diff --git a/test/output/build/files/files.html b/test/output/build/files/files.html
@@ -84,4 +84,5 @@
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>
diff --git a/test/output/build/files/subsection/subfiles.html b/test/output/build/files/subsection/subfiles.html
@@ -66,4 +66,5 @@
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>
diff --git a/test/output/build/fragments/index.html b/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>
diff --git a/test/output/build/imports/foo/foo.html b/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>
diff --git a/test/output/build/imports/script.html b/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>
diff --git a/test/output/build/jsr/index.html b/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>
diff --git a/test/output/build/multi/index.html b/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>
diff --git a/test/output/build/multi/subsection/index.html b/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>
diff --git a/test/output/build/npm/index.html b/test/output/build/npm/index.html
@@ -43,4 +43,5 @@
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>
diff --git a/test/output/build/page-loaders/hello-js.html b/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>
diff --git a/test/output/build/page-loaders/hello-ts.html b/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>
diff --git a/test/output/build/page-loaders/index.html b/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>
diff --git a/test/output/build/pager/index.html b/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>
diff --git a/test/output/build/pager/null.html b/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>
diff --git a/test/output/build/pager/sub/index.html b/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>
diff --git a/test/output/build/pager/sub/page0.html b/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>
diff --git a/test/output/build/pager/sub/page1..10.html b/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>
diff --git a/test/output/build/pager/sub/page1.html b/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>
diff --git a/test/output/build/pager/sub/page2.html b/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>
diff --git a/test/output/build/pager/sub/page3.html b/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>
diff --git a/test/output/build/pager/sub/page4.html b/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>
diff --git a/test/output/build/pager/sub/page5.html b/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>
diff --git a/test/output/build/pager/sub/page6.html b/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>
diff --git a/test/output/build/pager/sub/page7.html b/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>
diff --git a/test/output/build/pager/sub/page8.html b/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>
diff --git a/test/output/build/params/bar/index.html b/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>
diff --git a/test/output/build/params/bar/loaded.html b/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>
diff --git a/test/output/build/params/foo/bar.html b/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>
diff --git a/test/output/build/params/foo/index.html b/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>
diff --git a/test/output/build/scripts/index.html b/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>
diff --git a/test/output/build/scripts/sub/index.html b/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>
diff --git a/test/output/build/search-public/page1.html b/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>
diff --git a/test/output/build/search-public/page3.html b/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>
diff --git a/test/output/build/search-public/sub/page2.html b/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>
diff --git a/test/output/build/simple-public/index.html b/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>
diff --git a/test/output/build/simple/simple.html b/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>
diff --git a/test/output/build/space-page/a space.html b/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>
diff --git a/test/output/build/space-page/index.html b/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>
diff --git a/test/output/build/subtitle/index.html b/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>
diff --git a/test/output/build/typescript/index.html b/test/output/build/typescript/index.html
@@ -76,4 +76,5 @@
 </footer>
 </div>
 </body>
+<script>{/* redacted init script */}</script>
 </html>