Skip to content

dark/light body class #1780

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 12 commits into
base: main
Choose a base branch
from
Draft

dark/light body class #1780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
eb0be3c
dark/light body class
Fil Oct 25, 2024
907a7cb
fix tests
Fil Oct 28, 2024
7bdfd5a
Merge branch 'main' into fil/dark-class
Fil Nov 6, 2024
90fa91a
common dark
Fil Nov 6, 2024
6decacf
fix comment
Fil Nov 6, 2024
c0ba454
redacted script, optimized
Fil Nov 6, 2024
afa6703
fix tests
Fil Nov 6, 2024
43074b3
semicolon
Fil Nov 6, 2024
bcab913
dark.js ; use color not background-color
Fil Nov 6, 2024
9d0cdfd
fix tests
Fil Nov 6, 2024
d3498b9
avoid top-level await
mbostock Nov 6, 2024
38e47e7
revert changes in dark()
Fil Nov 6, 2024
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/themes.md.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 9 additions & 0 deletions src/client/dark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import {Generators} from "observablehq:stdlib";

(async () => {
for await (const dark of Generators.dark()) {
const {classList} = document.body;
classList.toggle("dark", dark);
classList.toggle("light", !dark);
}
})();
1 change: 1 addition & 0 deletions src/client/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import "./pre.js";
import "./sidebar.js";
import "./toc.js";
import "./dark.js";

export {define} from "./main.js";
0 ...m/_observablehq/stdlib/inputs.00000006.js → ...b/_observablehq/stdlib/inputs.00000006.js
View file
Open in desktop
File renamed without changes.
0 .../_observablehq/stdlib/inputs.00000006.css → .../_observablehq/stdlib/inputs.00000007.css
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions test/output/build/duckdb/index.html
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
import "../_observablehq/stdlib/inputs.00000006.js";
import "../_observablehq/stdlib/inputs.00000005.js";
0 ...b/_observablehq/stdlib/inputs.00000007.js → ...m/_observablehq/stdlib/inputs.00000005.js
View file
Open in desktop
File renamed without changes.
0 .../_observablehq/stdlib/inputs.00000006.css → .../_observablehq/stdlib/inputs.00000006.css
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions test/output/build/npm/index.html
View file
Open in desktop
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
0 .../_observablehq/stdlib/inputs.00000005.css → ...l/_observablehq/stdlib/inputs.00000006.js
View file
Open in desktop
File renamed without changes.
0 ...l/_observablehq/stdlib/inputs.00000007.js → .../_observablehq/stdlib/inputs.00000007.css
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions test/output/build/sql/index.html
View file
Open in desktop
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
Loading