Web UI: dark by default with a light/dark toggle; fix hidden labels

The page starts dark regardless of the system setting; the toggle at the top
right switches to light and is remembered in the browser. [hidden] now
always wins: label{display:block} had overridden it, so the hidden VLAN
split checkbox still showed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/aes67-core-base.md

@@ -6,6 +6,7 @@ Reference devices for UI and defaults: Riedel Bolero (PTP status), Riedel Direct
 
 ## Web UI (web/index.html)
 - Single file, no dependencies, minimal CSS. Embed in firmware (EMBED_TXTFILES, gzip optional).
+- Theme: dark by default; a toggle (top right) switches to light, remembered per browser (localStorage).
 - CORE sections: Status (incl. temperatures), PTP status (Riedel-style + Details), PTP, AES67 output, Network (+VLAN), Logging, SDP, Firmware.
 - PROJECT blocks are marked `PROJECT START/END` in the HTML (live controls and config fieldsets) and in the script (`PROJECT` object: `title`, `def` defaults merged over core defaults, `toggle(f)`, `statusRows(st)`, `poll()`).
 - Binding: every `<input|select name="group.key">` maps to `cfg[group][key]`. Adding a setting means adding an input and a default; no other JS needed. Number inputs and numeric selects are sent as JSON numbers.

web/index.html

@@ -11,7 +11,11 @@
   Form fields bind to config JSON by name="group.key". Add a field = add an input; no JS needed.
 -->
 <style>
-:root{color-scheme:light dark}
+/* Dark by default; the toggle (top right) switches to light and is remembered in this browser. */
+:root{color-scheme:dark}
+:root.light{color-scheme:light}
+#theme{position:fixed;top:8px;right:8px;font-size:18px;line-height:1;padding:4px 8px;cursor:pointer}
+[hidden]{display:none!important}  /* else label{display:block} overrides it */
 body{font:14px/1.4 system-ui,sans-serif;max-width:720px;margin:0 auto;padding:0 16px 32px}
 fieldset{margin:12px 0}
 label{display:block;margin:4px 0}
@@ -25,8 +29,17 @@ pre{overflow-x:auto}
 .bar{position:sticky;bottom:0;background:Canvas;padding:8px 0;border-top:1px solid color-mix(in srgb,CanvasText 20%,transparent)}
 .ok{color:#2a2}.warn{color:#d80}.bad{color:#e33}
 </style>
+<script>
+// Before the page is drawn, so a light choice doesn't flash dark first (and vice versa).
+try { if (localStorage.getItem('theme') === 'light') document.documentElement.classList.add('light'); } catch {}
+function toggleTheme() {
+  const light = document.documentElement.classList.toggle('light');
+  try { localStorage.setItem('theme', light ? 'light' : 'dark'); } catch {}
+}
+</script>
 </head>
 <body>
+<button id="theme" type="button" onclick="toggleTheme()" title="Light / dark">&#x25D0;</button>
 <h2 id="title">AES67 device</h2>
 
 <fieldset><legend>Status</legend><table id="status"></table></fieldset>