Merge pull request 'Twelve themes, and the Theme section folds away' (#8) from claude/themes into main

public/admin/admin.css

@@ -451,6 +451,36 @@ a.btn { text-decoration: none; }
 
 /* one swatch per preset: a miniature dashboard (page, a tile on it, the
    accent as a status dot) and the name; the current one wears the accent */
+/* ── a collapsible admin section ─────────────────────────────────────
+   The pattern for any section of this page that folds. The markup is a
+   <details class="admin-fold"> holding the section's contents, headed by a
+   <summary class="admin-h1 admin-fold-title">: the title keeps the same
+   type as every other section heading — a <summary> would otherwise come
+   out at the normal weight — and the caret follows the words, so a folded
+   section still reads as a heading first. The whole row is the hit target. */
+details.admin-fold > summary.admin-fold-title {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700; /* matches h1.admin-h1; summary defaults to normal */
+  user-select: none;
+}
+details.admin-fold > summary.admin-fold-title::-webkit-details-marker { display: none; }
+/* after the title, not before it — the heading reads first, the caret says
+   there is more behind it */
+details.admin-fold > summary.admin-fold-title::after {
+  content: "";
+  width: 0; height: 0;
+  border-left: 6px solid var(--muted);
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  transition: transform 0.15s;
+}
+details.admin-fold[open] > summary.admin-fold-title::after { transform: rotate(90deg); }
+details.admin-fold > summary.admin-fold-title:hover { color: var(--accent); }
+
 .theme-swatches {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));

public/admin/index.html

@@ -41,9 +41,11 @@
     </section>
 
     <section id="theme-section" hidden>
-      <h1 class="admin-h1">Theme</h1>
-      <div class="theme-swatches" id="theme-swatches" role="radiogroup" aria-label="Theme"></div>
-      <div class="admin-status" id="theme-status"></div>
+      <details class="admin-fold">
+        <summary class="admin-h1 admin-fold-title">Theme</summary>
+        <div class="theme-swatches" id="theme-swatches" role="radiogroup" aria-label="Theme"></div>
+        <div class="admin-status" id="theme-status"></div>
+      </details>
     </section>
 
     <section id="modules-section" hidden>

public/style.css

@@ -941,8 +941,10 @@ body.fullscreen #grid { padding-bottom: 0; }
    every shell element follows, and a colour a tile is configured with (set
    on the tile itself) still wins. The :root block at the top of this file is
    "booth", the default; the list of ids and names lives in server.js
-   (GET /api/theme). All four are booth-grade: high contrast, the accent
-   nowhere near the danger red or the warning amber, muted still readable. */
+   (GET /api/theme). Every one is booth-grade: high contrast, the accent
+   nowhere near the danger red or the warning amber, muted still readable.
+   Each sets --accent-text too when the default (a near-black green, for
+   booth's mint) would look wrong against its own accent. */
 
 /* Harbor — deep navy, cyan accent */
 html[data-theme="harbor"] {
@@ -993,3 +995,100 @@ html[data-theme="daylight"] {
   --danger: #d1242f;
   --warn: #b26a00;
 }
+
+/* Midnight — indigo night, violet accent */
+html[data-theme="midnight"] {
+  --bg: #0a0b18;
+  --panel: #14162b;
+  --border: #272a4a;
+  --text: #e8e9fb;
+  --muted: #9a9cc8;
+  --accent: #9d8cff;
+  --accent-text: #12103a;
+  --danger: #ff5a72;
+  --warn: #f5b93a;
+}
+
+/* Moss — forest floor, lime accent (warn pushed orange so the two greens
+   and the amber never read as one another) */
+html[data-theme="moss"] {
+  --bg: #08120c;
+  --panel: #101e15;
+  --border: #1f3728;
+  --text: #e9f4ea;
+  --muted: #8fb09a;
+  --accent: #8fdb3f;
+  --accent-text: #15250a;
+  --danger: #ff5a52;
+  --warn: #ff9f1c;
+}
+
+/* Plum — aubergine, purple accent */
+html[data-theme="plum"] {
+  --bg: #110a17;
+  --panel: #1d1228;
+  --border: #332042;
+  --text: #f2e9f8;
+  --muted: #b195c2;
+  --accent: #c084fc;
+  --accent-text: #260a37;
+  --danger: #ff4d4f;
+  --warn: #f7b53b;
+}
+
+/* Sepia — warm brown room, cool teal accent: the opposite arrangement to
+   Ember, which is warm throughout */
+html[data-theme="sepia"] {
+  --bg: #12100b;
+  --panel: #1d1913;
+  --border: #33291d;
+  --text: #f4ede0;
+  --muted: #b3a48b;
+  --accent: #5eead4;
+  --accent-text: #06231e;
+  --danger: #ff5a52;
+  --warn: #ffc247;
+}
+
+/* Blackout — true black for a dark room, where any glow off the screen
+   carries; everything else is as bright as it can be against it */
+html[data-theme="blackout"] {
+  --bg: #000000;
+  --panel: #0a0a0a;
+  --border: #1f1f1f;
+  --text: #ffffff;
+  --muted: #9e9e9e;
+  --accent: #00e5ff;
+  --accent-text: #00212a;
+  --danger: #ff3b30;
+  --warn: #ffcc00;
+}
+
+/* Paper — the warm light one, next to Daylight's cool white. Danger and warn
+   darken, as they must on a light background, and the indigo accent takes
+   white text. */
+html[data-theme="paper"] {
+  --bg: #f5f1e8;
+  --panel: #fffdf8;
+  --border: #ddd5c4;
+  --text: #1c1a15;
+  --muted: #6b6455;
+  --accent: #4f46e5;
+  --accent-text: #ffffff;
+  --danger: #c8102e;
+  --warn: #9a6700;
+}
+
+/* Iron — no colour of its own: the accent is near-white, so the only hues on
+   screen are a module's own and the red/amber that mean something */
+html[data-theme="iron"] {
+  --bg: #0c0c0d;
+  --panel: #161617;
+  --border: #2b2b2d;
+  --text: #f2f2f3;
+  --muted: #9a9a9d;
+  --accent: #d8d8dc;
+  --accent-text: #131314;
+  --danger: #ff4d4f;
+  --warn: #ffb224;
+}