mdeck 3.6.1 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 3.7.0 — 2026-10-09
+
+- Palettes have a third accent, `--accent-3`, and the three accents mean something: `--accent` is emphasis, `--accent-2` its companion (gradients, a contrast to the accent), `--accent-3` attention, used sparingly. `--accent-3` marks things and need not be readable as text, so it may be a yellow; `mdeck check` asks only that it can be seen (1.5:1 against the background). A palette without `--accent-3` keeps working and gets an amber (`#d99a00`, at night `#f5c542`); `mdeck check` suggests giving it its own. All built-in palettes and those in the theme repository set it (the repository requires it); `mdeck palettes update` brings installed ones up to date.
+- Callouts take their colours from the palette: note, tip and important the accent, warning and caution the third accent. The five callout colours (`--callout-note` … `--callout-caution`) are gone, and with them the green, purple and blue that matched no palette. The built-in themes follow.
+
+## 3.6.2 — 2026-10-09
+
+- The docs home page and the README start with what mdeck does: drawing from an iPad, polls from phones, citations, themes, running code and sending one file, each with a picture (`npm run feature-images` renders them). The docs' example deck is now a short tour of mdeck, with its own control bar and drawing, and a picker of every built-in theme as a picture, with light or dark.
+- An embedded deck (`?embedded=1`) shows its control bar with `?controls=1`.
+- The reader view has a **Drawings** button when the deck has drawings: it hides and shows them on the slides, in Read and in **Save as PDF**, and the browser remembers the choice. A file made with `mdeck send` opens there, so whoever gets it can see the slides clean.
+
 ## 3.6.1 — 2026-10-09
 
 - `mdeck snapshot --sheet` saves one picture of the slides in a grid, each under its number and heading (`my-talk-sheet.png`): a whole deck at a glance, for you or an assistant. It works with `--slide` and `--dark`.

package/README.md

@@ -14,6 +14,47 @@
   <a href="LICENSE">MIT license</a>
 </p>
 
+## What you can do with it
+
+<table>
+<tr>
+<td width="50%" valign="top">
+<a href="docs/site/images/features/drawing.webp"><img src="docs/site/images/features/drawing.webp" alt="The presenter view on an iPad with circles, an arrow and a highlight drawn on a chart slide, and the projector behind it showing the same strokes"></a>
+<p><b><a href="https://gh.tschieber.de/mdeck/drawing.html">Draw on your slides, from an iPad if you like</a></b><br>
+Circle a number, underline a phrase, point with a laser. Pair an iPad by scanning a code, and it becomes your presenter screen and drawing pad while the laptop drives the projector: every stroke shows on the big screen as you draw.</p>
+</td>
+<td width="50%" valign="top">
+<a href="docs/site/images/features/polls.webp"><img src="docs/site/images/features/polls.webp" alt="A poll slide with live bars and a QR code, and a phone showing the same question with one answer picked"></a>
+<p><b><a href="https://gh.tschieber.de/mdeck/audience.html">Ask the room, and show the answers on the slide</a></b><br>
+Polls, scales, word clouds, open questions and numbers to guess. People scan the code and answer on their phones, no app needed, and the bars grow as votes come in. Close the vote, discuss, reveal the right answer.</p>
+</td>
+</tr>
+<tr>
+<td width="50%" valign="top">
+<a href="docs/site/images/features/citations.webp"><img src="docs/site/images/features/citations.webp" alt="A slide with author–year citations and the full references at its foot, over a slide that lists all references"></a>
+<p><b><a href="https://gh.tschieber.de/mdeck/more-content.html#cite-a-source">Cite your sources properly</a></b><br>
+Cite as in a paper, <code>[@knuth1984, p. 97]</code>, from the BibTeX, CSL-JSON or Hayagriva file you already keep. Each slide lists what it cites at its foot, in APA, Vancouver, Harvard or any CSL style.</p>
+</td>
+<td width="50%" valign="top">
+<a href="docs/site/images/features/themes.webp"><img src="docs/site/images/features/themes.webp" alt="The same chart slide in six themes: neue, plain, work, academic, minimal and glass"></a>
+<p><b><a href="https://gh.tschieber.de/mdeck/appearance.html">Write the content once, change the look anytime</a></b><br>
+The file holds what you say; a theme and a palette decide how it looks. One line changes every slide, light or dark. Six themes come with mdeck, more are in the <a href="https://gh.tschieber.de/mdeck-themes/">theme repository</a>.</p>
+</td>
+</tr>
+<tr>
+<td width="50%" valign="top">
+<a href="docs/site/images/features/code.webp"><img src="docs/site/images/features/code.webp" alt="A slide with a short Python example and its output below it"></a>
+<p><b><a href="https://gh.tschieber.de/mdeck/more-content.html#show-a-code-example">Run code on the slide</a></b><br>
+Give a Python or JavaScript example a Run button, change it in front of the audience and run it again. Python runs in the browser, NumPy and pandas included.</p>
+</td>
+<td width="50%" valign="top">
+<a href="docs/site/images/features/reader.webp"><img src="docs/site/images/features/reader.webp" alt="The reader view of a talk on a laptop, with an outline of the slides, and on a phone in reading mode"></a>
+<p><b><a href="https://gh.tschieber.de/mdeck/sharing.html">Send one file that anyone can open</a></b><br>
+<code>mdeck send</code> makes a single HTML file: an outline, a reading mode for phones, light and dark, and the PDF inside. It opens in any browser, offline too, without your speaker notes.</p>
+</td>
+</tr>
+</table>
+
 ## Start from what you have
 
 ```text
@@ -117,12 +158,13 @@ mdeck send talk.md           # one file to email, with a PDF inside
 ## What you get
 
 - **Layouts:** title, chapter, big statement, image and text, split, full-bleed image, and plain content slides, with points that appear one at a time.
-- **Looks:** four built-in themes and five colour palettes, each light or dark, changeable without touching the slides. Install more from the [theme repository](https://gh.tschieber.de/mdeck-themes/) with `mdeck themes install`, or make your own as small `extension.toml` folders beside the deck.
+- **Looks:** six built-in themes and six colour palettes, each light or dark, changeable without touching the slides. Install more from the [theme repository](https://gh.tschieber.de/mdeck-themes/) with `mdeck themes install`, or make your own as small `extension.toml` folders beside the deck.
 - **One launch page:** `mdeck run` opens a page with a live preview, the presenter and audience views, the deck and reader views, the editor, the guides, one-click builds and PDF, the deck's check results, and for decks with a server its health and the presenter code.
 - **Presenting:** a presenter view with notes and timer, and an audience window that stays in sync.
-- **Drawing on slides:** pen with pressure, highlighter and a fading marker, with a mouse, a finger or an iPad pencil (`D`). Drawings are saved in `<deck>.drawings.json` beside the deck and appear in every view, build and PDF. An iPad can present on its own, or pair with the laptop through a QR code on the launch page while the laptop's audience window follows it.
+- **Drawing on slides:** pen with pressure, highlighter and a laser pointer, with a mouse, a finger or an iPad pencil (`D`). Drawings are saved in `<deck>.drawings.json` beside the deck and appear in every view, build and PDF. An iPad can present on its own, or pair with the laptop through a QR code on the launch page while the laptop's audience window follows it.
 - **Audience questions:** `<poll room="lunch" options="A|B|C" />` shows live results and a QR code; people vote on their phones. `<scale>`, `<wordcloud>` and `<question>` ask for a rating, words or open answers, and `<qrcode join />` shows the join code once for all of them. Rooms run inside `mdeck run --network` or on a small server (`mdeck server`).
 - **Sharing:** a reader view with an outline, a phone-friendly Read mode and a PDF download; speaker notes are stripped from shared builds, and interactive slides appear in their finished state.
+- **Citations:** cite with `[@key]` from BibTeX, CSL-JSON or Hayagriva files; each slide lists its references at its foot, `<bibliography />` lists them all, in any CSL style.
 - **Content:** pictures, video, tables, callouts, code with syntax highlighting and live execution, formulas, QR codes, and your own Preact components, kept with one deck or shared between decks.
 - **New designs on request:** ask your assistant for a palette, theme, layout or interactive component; it keeps them as small folders beside the deck.
 - **Editing in the browser:** `mdeck edit talk.md` opens an editor with a live preview and forms for slides and settings, and `mdeck design` shows themes and palettes on a sample deck for fine-tuning. It writes back into your text file.

package/assets/extensions/palettes/cobalt/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#d5dbf0"
 "--accent" = "#1f3fd1"
 "--accent-2" = "#e8590c"
+"--accent-3" = "#e8a400"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#212b5e"
 "--accent" = "#6f8cff"
 "--accent-2" = "#ff922b"
+"--accent-3" = "#ffd43b"
 "--on-accent" = "#0a1030"

package/assets/extensions/palettes/greyscale/extension.toml

@@ -8,8 +8,8 @@ author = "Tilman Schieber"
 license = "MIT"
 
 # No colour anywhere: emphasis is black against the softer body text, the
-# second accent a mid grey; code and callouts use greys instead of their
-# usual colours.
+# second accent a mid grey, the third (warnings) a lighter grey; code uses
+# greys instead of its usual colours.
 [light]
 "--bg" = "#ffffff"
 "--surface" = "#f0f0f0"
@@ -19,6 +19,7 @@ license = "MIT"
 "--rule" = "#d4d4d4"
 "--accent" = "#000000"
 "--accent-2" = "#6e6e6e"
+"--accent-3" = "#9a9a9a"
 "--on-accent" = "#ffffff"
 "--token-default" = "#141414"
 "--token-comment" = "#6b6b6b"
@@ -27,11 +28,6 @@ license = "MIT"
 "--token-keyword" = "#000000"
 "--token-function" = "#2a2a2a"
 "--token-operator" = "#555555"
-"--callout-note" = "#4a4a4a"
-"--callout-tip" = "#4a4a4a"
-"--callout-important" = "#000000"
-"--callout-warning" = "#7a7a7a"
-"--callout-caution" = "#000000"
 
 [dark]
 "--bg" = "#121212"
@@ -42,6 +38,7 @@ license = "MIT"
 "--rule" = "#303030"
 "--accent" = "#ffffff"
 "--accent-2" = "#a6a6a6"
+"--accent-3" = "#6e6e6e"
 "--on-accent" = "#121212"
 "--token-default" = "#f2f2f2"
 "--token-comment" = "#9a9a9a"
@@ -50,8 +47,3 @@ license = "MIT"
 "--token-keyword" = "#ffffff"
 "--token-function" = "#e0e0e0"
 "--token-operator" = "#b0b0b0"
-"--callout-note" = "#b8b8b8"
-"--callout-tip" = "#b8b8b8"
-"--callout-important" = "#ffffff"
-"--callout-warning" = "#8c8c8c"
-"--callout-caution" = "#ffffff"

package/assets/extensions/palettes/lagoon/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#e0deda"
 "--accent" = "#0d9488"
 "--accent-2" = "#c2410c"
+"--accent-3" = "#ca8a04"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#23332f"
 "--accent" = "#2dd4bf"
 "--accent-2" = "#fb923c"
+"--accent-3" = "#facc15"
 "--on-accent" = "#062b26"

package/assets/extensions/palettes/nordic/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#cdd8e1"
 "--accent" = "#1f6f9f"
 "--accent-2" = "#7a5c9e"
+"--accent-3" = "#c08a1e"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#22343f"
 "--accent" = "#7cc4ea"
 "--accent-2" = "#c3a8e6"
+"--accent-3" = "#e8c170"
 "--on-accent" = "#0e1a24"

package/assets/extensions/palettes/paper/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#e0ddd6"
 "--accent" = "#c2410c"
 "--accent-2" = "#1f2937"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#2e2e2c"
 "--accent" = "#fb8c4a"
 "--accent-2" = "#e7e5e0"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#151515"

package/assets/extensions/palettes/swiss/extension.toml

@@ -16,6 +16,7 @@ license = "MIT"
 "--rule" = "#dadada"
 "--accent" = "#e30613"
 "--accent-2" = "#0047bb"
+"--accent-3" = "#f2b700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -27,4 +28,5 @@ license = "MIT"
 "--rule" = "#2e2e2e"
 "--accent" = "#ff3b30"
 "--accent-2" = "#6f9bff"
+"--accent-3" = "#ffd60a"
 "--on-accent" = "#0d0d0d"

package/assets/extensions/themes/academic/styles.css

@@ -476,11 +476,9 @@ strong { color: var(--ink); font-weight: 700; }
 .slide-body .callout p { color: var(--ink); }
 .slide-body .callout :is(ul, ol) { gap: 8px; }
 
-.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition, .callout-tip, .callout-important) { --block: var(--accent); }
+.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition, .callout-note, .callout-tip, .callout-important) { --block: var(--accent); }
 .slide-body :is(.callout-definition) { --block: var(--accent-2); }
-.slide-body .callout-note { --block: var(--callout-note); }
-.slide-body .callout-warning { --block: var(--callout-warning); }
-.slide-body .callout-caution { --block: var(--callout-caution); }
+.slide-body :is(.callout-warning, .callout-caution) { --block: var(--accent-3); }
 .slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition) > :not(.callout-title) {
   font-family: var(--font-serif);
   font-style: italic;

package/assets/extensions/themes/glass/styles.css

@@ -640,13 +640,9 @@ deck-stage[data-deck-static] .slide { animation: none; }
   box-shadow: 0 0 10px currentColor;
 }
 .slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink); }
-.slide-body .callout-note { --tint: var(--callout-note); }
-.slide-body .callout-tip { --tint: var(--callout-tip); }
-.slide-body .callout-important { --tint: var(--callout-important); }
-.slide-body .callout-warning { --tint: var(--callout-warning); }
-.slide-body .callout-caution { --tint: var(--callout-caution); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { --tint: var(--accent); }
+.slide-body :is(.callout-warning, .callout-caution) { --tint: var(--accent-3); }
 .slide-body .callout-definition { --tint: var(--accent-2); }
-.slide-body .callout-tip .callout-title { color: color-mix(in oklab, var(--callout-tip) 60%, var(--ink)); }
 .slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary) .callout-title { color: var(--em); }
 .slide-body .callout-definition .callout-title { color: light-dark(color-mix(in oklab, var(--accent-2) 80%, var(--ink)), var(--accent-2)); }
 

package/assets/extensions/themes/minimal/styles.css

@@ -297,11 +297,8 @@ strong { color: var(--ink); font-weight: 600; }
   margin: 32px 0 0;
   max-width: 1200px;
 }
-.slide-body .callout-tip { border-left-color: var(--accent); }
-.slide-body .callout-note { border-left-color: var(--callout-note); }
-.slide-body .callout-important { border-left-color: var(--callout-important); }
-.slide-body .callout-warning { border-left-color: var(--callout-warning); }
-.slide-body .callout-caution { border-left-color: var(--callout-caution); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { border-left-color: var(--accent); }
+.slide-body :is(.callout-warning, .callout-caution) { border-left-color: var(--accent-3); }
 .slide-body .callout-title { margin-bottom: 8px; }
 .slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
 /* Lecture blocks: theorems in the accent, definitions in the second */

package/assets/extensions/themes/neue/styles.css

@@ -434,12 +434,9 @@ strong { color: var(--ink); font-weight: 600; }
   margin: 40px 0 0;
   max-width: 1200px;
 }
-.slide-body .callout-tip { border-top-color: var(--accent); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { border-top-color: var(--accent); }
 .slide-body .callout-tip .callout-title { color: var(--accent); }
-.slide-body .callout-note { border-top-color: var(--callout-note); }
-.slide-body .callout-important { border-top-color: var(--callout-important); }
-.slide-body .callout-warning { border-top-color: var(--callout-warning); }
-.slide-body .callout-caution { border-top-color: var(--callout-caution); }
+.slide-body :is(.callout-warning, .callout-caution) { border-top-color: var(--accent-3); }
 .slide-body .callout-title { letter-spacing: 0.12em; margin-bottom: 10px; }
 .slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
 /* Lecture blocks: theorems under a rule in the accent, definitions in the second */

package/assets/extensions/themes/plain/styles.css

@@ -418,8 +418,7 @@ strong { font-weight: 600; color: var(--ink); }
 }
 .slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink-soft); }
 .slide-body .callout :is(.callout-title) { color: var(--ink); }
-.slide-body .callout:is(.callout-warning, .callout-caution) { border-left-color: var(--callout-warning); }
-.slide-body .callout.callout-caution { border-left-color: var(--callout-caution); }
+.slide-body .callout:is(.callout-warning, .callout-caution) { border-left-color: var(--accent-3); }
 .slide-body .callout.callout-proof { background: none; border: 0; padding: 0; }
 
 /* ─────────────────────────────────────────────

package/assets/extensions/themes/work/styles.css

@@ -448,11 +448,8 @@ strong { font-weight: 600; color: var(--ink); }
   margin: 0 0 8px 0;
 }
 .slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink); }
-.slide-body .callout-note { --bar: var(--callout-note); }
-.slide-body .callout-tip { --bar: var(--callout-tip); }
-.slide-body .callout-important { --bar: var(--callout-important); }
-.slide-body .callout-warning { --bar: var(--callout-warning); }
-.slide-body .callout-caution { --bar: var(--callout-caution); }
+.slide-body :is(.callout-note, .callout-tip, .callout-important) { --bar: var(--accent); }
+.slide-body :is(.callout-warning, .callout-caution) { --bar: var(--accent-3); }
 .slide-body .callout-definition { --bar: var(--accent-2); }
 
 /* ─────────────────────────────────────────────

package/docs/reference/authoring.md

@@ -686,7 +686,7 @@ A local SVG whose source contains `var(--…)` is drawn inline instead of as an
 layout's `image` (`title`, `chapter`, `image-text`, `full-bleed-image`, and
 local layouts that render it with `Picture` from `mdeck/layout`). It can use the
 palette's custom properties (`--bg`, `--surface`, `--ink`, `--ink-soft`,
-`--muted`, `--rule`, `--accent`, `--accent-2`, `--on-accent`) and follows the
+`--muted`, `--rule`, `--accent`, `--accent-2`, `--accent-3`, `--on-accent`) and follows the
 theme, palette and appearance. Give each a fallback (`var(--accent, #1f3fd1)`)
 for places that show the file on its own, set `fit: contain` to keep the whole
 drawing, prefix class names in its `<style>` because inline styles apply to the

package/docs/reference/extensions.md

@@ -83,6 +83,7 @@ description = "Deep blue with a warm highlight."
 "--rule" = "#c9d7e2"
 "--accent" = "#0a6aa8"
 "--accent-2" = "#b45309"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -94,6 +95,7 @@ description = "Deep blue with a warm highlight."
 "--rule" = "#24384b"
 "--accent" = "#ffbd69"
 "--accent-2" = "#7cc4ff"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#102030"
 ```
 

package/docs/reference/palettes.md

@@ -23,7 +23,7 @@ The presenter view and the reader view switch palette and light or dark without
 | `swiss` | white, black and signal red | black, white and red |
 | `nordic` | ice grey, deep navy and a cool steel blue | polar night with ice blue |
 | `cobalt` | strong ultramarine on white, vivid orange | midnight blue, bright blue and orange |
-| `greyscale` | black, white and greys only, code and callouts too | the same, inverted |
+| `greyscale` | black, white and greys only, code too | the same, inverted |
 | `lagoon` | teal on warm stone, orange second accent | deep teal-black, bright teal |
 | `paper` | off-white paper and near-black ink with one orange accent | charcoal with a softer orange |
 
@@ -35,7 +35,7 @@ More palettes are in the [theme repository](https://github.com/tilman-schieber/m
 
 ## Colours
 
-Every variant sets all nine:
+Every variant sets all ten (a palette without `--accent-3` gets an amber, and `mdeck check` suggests setting one):
 
 | Colour | Role |
 |---|---|
@@ -45,8 +45,9 @@ Every variant sets all nine:
 | `--ink-soft` | Body text |
 | `--muted` | Small labels: headers, footers, captions |
 | `--rule` | Lines and dividers |
-| `--accent` | The highlight: emphasis, markers, chapter slides |
-| `--accent-2` | A second highlight for themes that pair two |
+| `--accent` | Emphasis: highlighted words, markers, chapter slides; notes, tips and important callouts |
+| `--accent-2` | The accent's companion: gradients, a contrast to the accent, definitions |
+| `--accent-3` | Attention: warnings and cautions, and a colour that pops, used sparingly. It marks things (bars, shapes) and need not be readable as text, so it may be a yellow |
 | `--on-accent` | Text set on the accent, such as a chapter slide's title |
 
 Themes may mix them (for example a light tint of the accent), and read the other variant as `--inverse-bg`, `--inverse-ink`, `--inverse-accent` and so on.
@@ -71,6 +72,7 @@ description = "Sea blue and rust on chalk white."
 "--rule" = "#c9d7e2"
 "--accent" = "#0a6aa8"
 "--accent-2" = "#b45309"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -82,6 +84,7 @@ description = "Sea blue and rust on chalk white."
 "--rule" = "#24384b"
 "--accent" = "#5fb3f0"
 "--accent-2" = "#f59e5b"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#0d1a24"
 ```
 

package/docs/site/assets/site.css

@@ -68,6 +68,16 @@ h1 { font-size: clamp(32px, 3vw, 46px); margin: 0 0 24px; max-width: 23ch; }
 .welcome h1 { font-size: clamp(40px, 4.5vw, 63px); line-height: 1.08; max-width: 14ch; letter-spacing: -.055em; }
 .welcome article > p:first-of-type { font-size: 20px; line-height: 1.55; color: var(--secondary); max-width: 53ch; }
 .welcome article > p:nth-of-type(3) > a { display: inline-block; background: var(--blue); color: white; text-decoration: none; padding: 10px 19px; border-radius: 5px; font-size: 15px; font-weight: 600; }
+.welcome article { max-width: 820px; }
+.welcome article > :not(.features) { max-width: 76ch; }
+.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; margin: 24px 0 32px; }
+.features section { display: flex; flex-direction: column; }
+.features section > p:first-child { order: -1; margin: 0 0 14px; }
+.features section > p:first-child a { margin: 0; }
+.features img { aspect-ratio: 9 / 5; object-fit: contain; background: #e9ecef; }
+.features h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
+.features section > p:last-child { margin: 0; font-size: 15px; line-height: 1.55; }
+@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }
 h2 { font-size: 28px; margin: 52px 0 17px; }
 h3 { font-size: 21px; margin: 32px 0 12px; }
 p { margin: 0 0 20px; }
@@ -104,8 +114,19 @@ blockquote p:last-child { margin: 0; }
 .slide-example iframe { display: block; width: calc(100% - 36px); aspect-ratio: 16 / 9; margin: 0 18px; border: 0; background: white; box-shadow: 0 3px 9px #20314815; }
 .preview-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; font-size: 12px; }
 .preview-controls > div { display: flex; align-items: center; gap: 7px; }
+.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding: 0 14px 14px; }
+.theme-picker button { min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: stretch; padding: 4px 4px 6px; border: 2px solid transparent; border-radius: 7px; background: transparent; font-size: 12px; color: #344d80; cursor: pointer; }
+.theme-picker img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; box-shadow: 0 1px 4px #20314826; border: 0; }
+.theme-picker button:hover { border-color: #bdcce9; }
+.theme-picker button[aria-checked="true"] { border-color: var(--blue); background: white; color: var(--blue); font-weight: 600; }
+.appearance-switch { display: flex; }
+.appearance-switch button { border-radius: 0; }
+.appearance-switch button:first-child { border-radius: 4px 0 0 4px; }
+.appearance-switch button:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
+.appearance-switch button[aria-checked="true"] { background: var(--blue); border-color: var(--blue); color: white; }
 .preview-controls button, .preview-controls select { padding: 5px 9px; border: 1px solid #bdcce9; background: white; border-radius: 4px; font-size: 12px; }
 .preview-controls button:hover { border-color: var(--blue); color: var(--blue); }
+.preview-controls .appearance-switch button[aria-checked="true"]:hover { color: white; filter: brightness(.9); }
 .preview-controls output { margin-left: 5px; color: #344d80; }
 .preview-controls label { display: flex; align-items: center; gap: 7px; color: #344d80; }
 .page-outline { position: sticky; top: 120px; align-self: start; font-size: 12px; max-height: calc(100dvh - 150px); overflow: auto; padding-left: 18px; border-left: 1px solid var(--rule); margin-top: 53px; }

package/docs/site/assets/site.js

@@ -79,21 +79,31 @@ for (const button of document.querySelectorAll('[data-copy]')) {
 
 for (const example of document.querySelectorAll('[data-preview]')) {
   const frame = example.querySelector('iframe')
-  const output = example.querySelector('output')
   let index = 0
-  for (const button of example.querySelectorAll('[data-control]')) {
-    button.addEventListener('click', () => frame.contentWindow.postMessage({ deckControl: { command: button.dataset.control } }, location.origin))
+  // Theme pictures and light or dark: the deck reloads in the new look on
+  // the same slide. Light or dark starts on each theme's own.
+  const themes = [...example.querySelectorAll('[data-theme]')]
+  const switches = [...example.querySelectorAll('[data-set-appearance]')]
+  let theme = themes.find(button => button.getAttribute('aria-checked') === 'true') ?? themes[0]
+  let appearance = theme?.dataset.appearance ?? 'light'
+  const show = () => {
+    for (const button of themes) button.setAttribute('aria-checked', String(button === theme))
+    for (const button of switches) button.setAttribute('aria-checked', String(button.dataset.setAppearance === appearance))
   }
-  example.querySelector('select').addEventListener('change', event => {
+  const reload = () => {
     const url = new URL(frame.src)
-    url.searchParams.set('theme', event.target.value)
+    url.searchParams.set('theme', theme.dataset.theme)
+    url.searchParams.set('appearance', appearance === theme.dataset.appearance ? '' : appearance)
     url.hash = String(index + 1)
     frame.src = url.toString()
-  })
+    show()
+  }
+  for (const button of themes) button.addEventListener('click', () => { theme = button; appearance = button.dataset.appearance; reload() })
+  for (const button of switches) button.addEventListener('click', () => { appearance = button.dataset.setAppearance; reload() })
+  show()
   window.addEventListener('message', event => {
     if (event.source !== frame.contentWindow || event.origin !== location.origin || !event.data?.deckStateChanged) return
     index = event.data.deckStateChanged.index
-    output.textContent = `Slide ${index + 1}`
   })
 }
 

package/docs/site/build.js

@@ -38,11 +38,19 @@ function navigation(current) {
 
 const exampleFiles = { 'first-talk': resolve(docsRoot, 'examples/first-talk.md'), 'custom-layouts': resolve(projectRoot, 'examples/custom-layouts/slides.md') }
 
-// The theme picker lists every registered theme and starts on the example's own design.
-function themeOptions(exampleFile) {
+// The theme picker: every registered theme as a picture of the example's
+// chart slide in it (images/themes/<theme>-thumb.webp, from
+// tools/feature-images.mjs), the example's own theme first and chosen; and light
+// or dark, starting on the theme's own.
+function themePicker(exampleFile) {
   const current = parseSlides(readFileSync(exampleFile, 'utf8')).deckConfig.theme ?? 'neue'
-  const themes = loadRegistry(exampleFile).themes
-  return Object.values(themes).map(theme => `<option value="${theme.id}"${theme.id === current ? ' selected' : ''}>${escape(theme.title)}</option>`).join('')
+  const themes = Object.values(loadRegistry(exampleFile).themes).sort((x, y) => (y.id === current) - (x.id === current))
+  const buttons = themes.map(theme => {
+    const thumb = `images/themes/${theme.id}-thumb.webp`
+    const picture = existsSync(resolve(docsRoot, thumb)) ? `<img src="${thumb}" alt="" width="160" height="90" loading="lazy">` : ''
+    return `<button type="button" role="radio" aria-checked="${theme.id === current}" data-theme="${theme.id}" data-appearance="${theme.manifest.appearance ?? 'light'}">${picture}<span>${escape(theme.title)}</span></button>`
+  }).join('')
+  return `<div class="theme-picker" role="radiogroup" aria-label="Theme">${buttons}</div>`
 }
 
 function preview(page) {
@@ -50,8 +58,9 @@ function preview(page) {
   const custom = page.preview === 'custom-layouts'
   return `<figure class="slide-example" data-preview>
     <figcaption><span>${custom ? 'A reusable comparison design' : 'A presentation you can try'}</span><a href="examples/${page.preview}.html?palette=&amp;appearance=" target="_blank" rel="noopener">Open slides</a></figcaption>
-    <iframe title="${custom ? 'Comparison slide example' : 'Example presentation'}" src="examples/${page.preview}.html?embedded=1&amp;palette=&amp;appearance=" loading="lazy"></iframe>
-    <div class="preview-controls"><div><button type="button" data-control="prev" aria-label="Previous slide or point">Previous</button><button type="button" data-control="next" aria-label="Next slide or point">Next</button><output aria-live="polite">Slide 1</output></div><label>Look <select aria-label="Example theme">${themeOptions(exampleFiles[page.preview])}</select></label></div>
+    <iframe title="${custom ? 'Comparison slide example' : 'Example presentation'}" src="examples/${page.preview}.html?embedded=1&amp;controls=1&amp;draw=1&amp;palette=&amp;appearance=" loading="lazy"></iframe>
+    <div class="preview-controls"><span>Move the pointer over the slides for their controls, or use the arrow keys. Press D to draw.</span><div class="appearance-switch" role="radiogroup" aria-label="Light or dark"><button type="button" role="radio" data-set-appearance="light">Light</button><button type="button" role="radio" data-set-appearance="dark">Dark</button></div></div>
+    ${themePicker(exampleFiles[page.preview])}
   </figure>`
 }
 

package/docs/site/content/drawing.md

@@ -32,7 +32,7 @@ Drawings live in a file next to your slides: `my-talk.drawings.json` for `my-tal
 - The first save of a session keeps a copy of the previous file in `.mdeck-backups`, next to your slides.
 - **Opened from a built folder or a single file**, the page has nowhere to save. Drawings are kept in that browser, and the toolbar's download button saves them as the drawings file, to put next to your slides. Safari may clear such browser data after a week without use, so download it after drawing.
 
-Builds and PDFs include the drawings. To leave them out, add `--no-drawings`:
+Builds and PDFs include the drawings. In the reader view, which a file from `mdeck send` opens in, a **Drawings** button hides and shows them, also for **Save as PDF**; the browser remembers the choice. To leave them out of a build altogether, add `--no-drawings`:
 
 ```sh
 mdeck pdf my-talk.md --no-drawings

package/docs/site/content/sharing.md

@@ -18,7 +18,7 @@ mdeck send my-talk.md
 
 Send `my-talk.html` by email. It opens in a **reader view**: an outline of all slides on the left, the slides in the middle, a **Read** mode that stacks every slide for scrolling on a phone, a **Light**/**Dark** button, a **Download PDF** button, and a **Present** button that opens standalone slides. The PDF is inside the file, so there is nothing else to attach.
 
-- Drawings from `my-talk.drawings.json` are part of every build and PDF; `--no-drawings` leaves them out. See [Draw on your slides](drawing.html).
+- Drawings from `my-talk.drawings.json` are part of every build and PDF; `--no-drawings` leaves them out. Readers can hide them with the **Drawings** button in the reader view. See [Draw on your slides](drawing.html).
 - Your speaker notes are removed. Add `--notes` to keep them in the file, for example when you also present from the same file. Readers only see notes if you put `reader:` with `notes: true` in the settings at the top of your slide file.
 - Slides with a poll, question, word cloud or scale stay as a record of the talk: the question and its options, marked as answered live. Add `--no-polls` to leave them out of the file and its PDF, together with slides showing the join code (`<qrcode join />`).
 - The PDF is made while sending, using Chrome or Chromium on your computer. If neither is found, the button offers the browser's own "Save as PDF" dialog instead. Set `MDECK_CHROME` to the browser's path if it is installed somewhere unusual. `--no-pdf` skips it.

package/docs/site/content/theme-authoring.md

@@ -48,6 +48,7 @@ title = "Blue notebook"
 "--rule" = "#dbe3ee"
 "--accent" = "#2455c7"
 "--accent-2" = "#17625c"
+"--accent-3" = "#c99700"
 "--on-accent" = "#ffffff"
 
 [dark]
@@ -59,6 +60,7 @@ title = "Blue notebook"
 "--rule" = "#24354d"
 "--accent" = "#7aa2ff"
 "--accent-2" = "#5ec4b6"
+"--accent-3" = "#f2c94c"
 "--on-accent" = "#0f1a2b"
 ```
 
@@ -76,11 +78,12 @@ The folder must be called `notebook` to match `id`. Use it with `palette: notebo
 | `--ink-soft` | Body text |
 | `--muted` | Secondary labels |
 | `--rule` | Borders |
-| `--accent` | Main highlight |
-| `--accent-2` | Secondary highlight |
+| `--accent` | Emphasis; notes, tips and important callouts |
+| `--accent-2` | The accent's companion: gradients, a contrast to the accent |
+| `--accent-3` | Attention: warnings and cautions. Use it sparingly, for bars and shapes, never as text: it may be a yellow |
 | `--on-accent` | Text placed on an accent background |
 
-A theme has no colours of its own: it uses these, and mixes of them, so every palette repaints it. For an inverted slide it uses the palette's other version, as `--inverse-bg`, `--inverse-ink`, `--inverse-accent` and so on:
+A theme has no colours of its own: it uses these, and mixes of them, so every palette repaints it. Give each accent the job its name says: a theme that colours callouts colours note, tip and important with `--accent` and warning and caution with `--accent-3`. For an inverted slide it uses the palette's other version, as `--inverse-bg`, `--inverse-ink`, `--inverse-accent` and so on:
 
 ```css
 .slide--focus {