1 files changed, 24 insertions, 6 deletions

diff --git a/vrsite/templates/layout.tmpl b/vrsite/templates/layout.tmpl
index 9bc9ddd..268b5b6 100644
--- a/vrsite/templates/layout.tmpl
+++ b/vrsite/templates/layout.tmpl
@@ -4,12 +4,20 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>{{.Title}}</title>
+<link rel="stylesheet" href="{{.Href "asset" "style.css"}}">
 <script>
+// the theme is worn before the first paint. A theme that is not one of the
+// two the site was built with lives in themes.css, so pull that in too —
+// from here, after style.css, so its :root block is the one that wins.
 {const d = document.documentElement, t = localStorage.getItem("vrsite-theme");
  if (t && t !== "system") d.dataset.theme = t;
+ if (t && !/^(system|dark|light)$/.test(t)) {
+   const l = document.createElement("link");
+   l.rel = "stylesheet"; l.id = "themescss"; l.href = "{{.Href "asset" "themes.css"}}";
+   document.head.append(l);
+ }
  d.dataset.mode = localStorage.getItem("vrsite-mode") || "trace";}
 </script>
-<link rel="stylesheet" href="{{.Href "asset" "style.css"}}">
 {{if .Live}}<script src="{{.Href "asset" "htmx.min.js"}}"></script>{{end}}
 <script src="{{.Href "asset" "app.js"}}" defer></script>
 </head>
@@ -35,11 +43,20 @@
       <a href="{{.Href "files"}}">files</a>{{if .Live}} ·
       <a href="{{.Href "jj"}}">jj</a>{{end}}
     </span>
-    <select id="themesel" aria-label="color scheme">
-      <option value="system">system</option>
-      <option value="dark">dark</option>
-      <option value="light">light</option>
-    </select>
+    <div class="themepick" id="themepick"
+         data-js="{{.Href "asset" "themes.js"}}" data-css="{{.Href "asset" "themes.css"}}"
+         data-dark="{{.Site.Theme.Name}}" data-light="{{.Site.Light.Name}}"
+         data-darkid="{{.Site.Theme.ID}}" data-lightid="{{.Site.Light.ID}}">
+      <button type="button" id="themebtn" aria-haspopup="listbox" aria-expanded="false"
+              title="theme — every one installed here (T)">theme</button>
+      <div class="thememenu" id="thememenu" hidden>
+        <input id="themefind" type="search" placeholder="filter themes…" aria-label="filter themes"
+               role="combobox" aria-controls="themelist" aria-autocomplete="list"
+               autocomplete="off" spellcheck="false">
+        <ul id="themelist" role="listbox" aria-label="themes"></ul>
+        <p class="meta hint">↑↓ preview · enter keeps · esc puts it back</p>
+      </div>
+    </div>
   </footer>
 </nav>
 
@@ -47,6 +64,7 @@
 {{if .Err}}<p class="err">{{.Err}}</p>{{end}}
 {{if eq .Kind "file"}}{{template "page-file" .}}
 {{else if eq .Kind "notes"}}{{template "page-notes" .}}
+{{else if eq .Kind "note"}}{{template "page-note" .}}
 {{else if eq .Kind "files"}}{{template "page-files" .}}
 {{else if eq .Kind "jj"}}{{template "page-jj" .}}
 {{else if eq .Kind "change"}}{{template "page-change" .}}