[FEAT] theme: light/charcoal dark mode with a persistent switcher

avian/frontend/apt.js

@@ -1517,6 +1517,20 @@
       + '  <div class="seg" data-key="' + key + '">' + btns + '</div>'
       + '</div>';
   }
+  // Client-side theme switcher row. Reuses the .seg look but is tagged
+  // data-theme-seg so wireSettingsControls skips it - it applies instantly
+  // and is NOT part of the Pi config save flow.
+  function themeRow() {
+    var cur = currentTheme();
+    var btn = function (v, label) {
+      return '<button type="button" data-theme="' + v + '" aria-current="' + (cur === v ? 'true' : 'false') + '">' + label + '</button>';
+    };
+    return ''
+      + '<div class="menu-row">'
+      + '  <div><span class="label">Theme</span><span class="hint">saved on this device</span></div>'
+      + '  <div class="seg" data-theme-seg>' + btn('light', 'light') + btn('dark', 'dark') + '</div>'
+      + '</div>';
+  }
   function wireSettingsControls(scope) {
     scope = scope || document;
     scope.querySelectorAll('.switch').forEach(function (sw) {
@@ -1537,7 +1551,7 @@
         setSaveState('change pending');
       });
     });
-    scope.querySelectorAll('.seg').forEach(function (seg) {
+    scope.querySelectorAll('.seg:not([data-theme-seg])').forEach(function (seg) {
       seg.querySelectorAll('button').forEach(function (b) {
         b.addEventListener('click', function () {
           seg.querySelectorAll('button').forEach(function (x) { x.setAttribute('aria-current', x === b ? 'true' : 'false'); });
@@ -2053,6 +2067,7 @@
         var preserve = cfg.preserve;
         adminBody.innerHTML =
           '<div class="admin-settings">'
+          + themeRow()
           + settingsToggle('preserve', 'Preserve all recordings', "don't auto-delete", preserve)
           + settingsSlider('CONFIDENCE',  'Confidence threshold', 'min score to log a detection', v.CONFIDENCE,  0.1, 0.95, 0.05, 2)
           + settingsSlider('SENSITIVITY', 'Sensitivity',          'analyzer sensitivity',          v.SENSITIVITY, 0.5, 1.5,  0.05, 2)
@@ -2067,6 +2082,18 @@
           + '</div>'
           + '</div>';
         wireSettingsControls(adminBody);
+        adminBody.querySelectorAll('.seg').forEach(wireToggleAdvance);   // open-space advance
+        // Theme switcher applies + persists immediately (separate from the
+        // Pi config save below).
+        var themeSeg = adminBody.querySelector('[data-theme-seg]');
+        if (themeSeg) themeSeg.addEventListener('click', function (ev) {
+          var b = ev.target.closest('button[data-theme]');
+          if (!b) return;
+          applyTheme(b.getAttribute('data-theme'));
+          [].forEach.call(themeSeg.querySelectorAll('button'), function (x) {
+            x.setAttribute('aria-current', x === b ? 'true' : 'false');
+          });
+        });
         var saveBtn = document.getElementById('saveBtn');
         if (saveBtn) saveBtn.addEventListener('click', saveSettings);
       })