web: a recording of the theme picker, and the tour step for it

The landing page's feature tour is scripted recordings -- driver scripts
against `slosh --script` on a virtual clock, re-rendered by `make` so a UI
change can never leave a stale demo -- and the picker is exactly the kind of
thing that does not survive being described. "Moving the selection applies the
theme" is a sentence; twenty-six seconds of a session changing colour under a
list is the claim itself.

demos/themes.py: a sidebar session with two tabs and a build pane that says it
is busy (so the spinner is in shot, turning in whatever colour the theme being
tried says it should), `cat config.kdl` showing a config that names a theme and
holds no colours at all, then C-a t -- the list, two themes worn rather than
swatched, `pho` typed to narrow, C-s writing the one line, a second `cat`
proving it wrote that line and nothing else, and finally a browse that ends in
Escape, which puts back what was worn.

Two rules the demo had to obey, both now in PLAN.md beside the other lessons:
only dark themes, because cells slosh does not paint keep the terminal's own
background and the cast header fixes that once -- `paper` would look broken in
the player and fine in a light terminal; and nothing on screen may carry this
machine, so the themes are copied next to the temp config rather than pointed
at with `theme_dir`, leaving a `cat` frame that reads as a name and a
directory nobody has to have.

The step slots after "make it yours, live", which is where a reader has just
been shown a config being edited by hand and is best placed to notice that a
theme is one word of it. Casts are built at publish time, so build-site picks
the new one up with no wiring.

1 files changed, 18 insertions, 0 deletions

diff --git a/web/index.html b/web/index.html
index e9ac8ea..a528816 100644
--- a/web/index.html
+++ b/web/index.html
@@ -52,6 +52,7 @@
         <div data-sloshcast="recordings/sessions.json" data-loop data-name="sessions"></div>
         <div data-sloshcast="recordings/reflow.json" data-loop data-name="reflow"></div>
         <div data-sloshcast="recordings/config.json" data-loop data-name="config"></div>
+        <div data-sloshcast="recordings/themes.json" data-loop data-name="themes"></div>
         <div data-sloshcast="recordings/shaders.json" data-loop data-name="shaders"></div>
         <div data-sloshcast="recordings/scripting.json" data-loop data-name="scripting"></div>
         <div data-sloshcast="recordings/extras.json" data-loop data-name="extras"></div>
@@ -103,6 +104,23 @@
         </ul>
       </article>
 
+      <article class="step" data-cast="themes">
+        <h3>Themes are names, not pasted palettes.</h3>
+        <p><kbd>C-a</kbd> <kbd>t</kbd> lists every theme you can name &mdash;
+        yours, and the ones slosh ships &mdash; and moving the selection puts
+        it on.</p>
+        <ul>
+          <li>the session behind the box is the preview: a swatch would be a
+          small lie about a palette that dresses a whole session</li>
+          <li>type to narrow the list, <kbd>Esc</kbd> to put back what you were
+          wearing</li>
+          <li><kbd>C-s</kbd> keeps it: one <code>theme_name</code> line written
+          into your config, every other line untouched</li>
+          <li><code>slosh -s main cmd '{"cmd":"theme","name":"amber"}'</code>
+          does the same from a script</li>
+        </ul>
+      </article>
+
       <article class="step" data-cast="shaders">
         <h3>Nifty visual effects, written as expressions.</h3>
         <p>Dim, tint, rulers, spotlights: over a pane's cells or over its