[feat](trx-frontend-http): add theme toggle and themed map/audio visuals

Add dark/light mode selector below logo and wire theme-aware visuals.\n\n- add compact theme toggle control under header logo\n- support persistent dark/light theme switching\n- use emoji labels for theme toggle actions\n- make jog and audio level visuals theme-aware\n- add dark-mode map tile layer and live layer switching on theme changes\n- keep responsive behavior for header graph and controls\n\nCo-authored-by: OpenAI Codex <codex@openai.com>

Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js

@@ -34,6 +34,7 @@ const serverSubtitle = document.getElementById("server-subtitle");
 const loadingTitle = document.getElementById("loading-title");
 const loadingSub = document.getElementById("loading-sub");
 const headerSigCanvas = document.getElementById("header-sig-canvas");
+const themeToggleBtn = document.getElementById("theme-toggle");
 
 let lastControl;
 let lastTxEn = null;
@@ -61,6 +62,35 @@ let jogAngle = 0;
 let lastClientCount = null;
 let lastLocked = false;
 const originalTitle = document.title;
+const savedTheme = loadSetting("theme", null);
+
+function currentTheme() {
+  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark";
+}
+
+function setTheme(theme) {
+  const next = theme === "light" ? "light" : "dark";
+  document.documentElement.setAttribute("data-theme", next);
+  saveSetting("theme", next);
+  if (themeToggleBtn) {
+    themeToggleBtn.textContent = next === "dark" ? "☀️ Light" : "🌙 Dark";
+    themeToggleBtn.title = next === "dark" ? "Switch to light mode" : "Switch to dark mode";
+  }
+}
+
+if (savedTheme === "light" || savedTheme === "dark") {
+  setTheme(savedTheme);
+} else {
+  const prefersLight = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
+  setTheme(prefersLight ? "light" : "dark");
+}
+
+if (themeToggleBtn) {
+  themeToggleBtn.addEventListener("click", () => {
+    setTheme(currentTheme() === "dark" ? "light" : "dark");
+    updateMapBaseLayerForTheme(currentTheme());
+  });
+}
 
 function readyText() {
   return lastClientCount !== null ? `Ready \u00b7 ${lastClientCount} user${lastClientCount !== 1 ? "s" : ""}` : "Ready";
@@ -956,11 +986,42 @@ window.addEventListener("resize", resizeHeaderSignalCanvas);
 
 // --- Leaflet Map (lazy-initialized) ---
 let aprsMap = null;
+let aprsMapBaseLayer = null;
 let aprsMapReceiverMarker = null;
 const stationMarkers = new Map();
 const mapMarkers = new Set();
 const mapFilter = { aprs: true, ft8: true };
 
+function mapTileSpecForTheme(theme) {
+  if (theme === "dark") {
+    return {
+      url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+      options: {
+        maxZoom: 19,
+        subdomains: "abcd",
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
+      },
+    };
+  }
+  return {
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    options: {
+      maxZoom: 19,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    },
+  };
+}
+
+function updateMapBaseLayerForTheme(theme) {
+  if (!aprsMap) return;
+  if (aprsMapBaseLayer) {
+    aprsMap.removeLayer(aprsMapBaseLayer);
+    aprsMapBaseLayer = null;
+  }
+  const spec = mapTileSpecForTheme(theme);
+  aprsMapBaseLayer = L.tileLayer(spec.url, spec.options).addTo(aprsMap);
+}
+
 function initAprsMap() {
   const mapEl = document.getElementById("aprs-map");
   if (!mapEl) return;
@@ -972,10 +1033,7 @@ function initAprsMap() {
   const zoom = hasLocation ? 10 : 2;
 
   aprsMap = L.map("aprs-map").setView(center, zoom);
-  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+  updateMapBaseLayerForTheme(currentTheme());
-    maxZoom: 19,
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-  }).addTo(aprsMap);
 
   if (hasLocation) {
     const popupText = serverCallsign ? serverCallsign : "Receiver";

src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html

@@ -20,7 +20,10 @@
       <div class="header-signal-wrap" aria-hidden="true">
         <canvas id="header-sig-canvas"></canvas>
       </div>
-      <img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
+      <div class="header-right">
+        <img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
+        <button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
+      </div>
     </div>
     <div class="tab-bar">
       <button class="tab active" data-tab="main">Main</button>
@@ -115,8 +118,8 @@
         <button id="tx-audio-btn" type="button">TX Audio</button>
         <label class="vol-label">RX<input type="range" id="rx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="rx-vol-pct">80%</small></label>
         <label class="vol-label">TX<input type="range" id="tx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="tx-vol-pct">80%</small></label>
-        <div id="audio-level" style="flex: 1 1 auto; height: 12px; border-radius: 999px; background: #1f2937; border: 1px solid #2d3748; overflow: hidden; min-width: 80px;">
+        <div id="audio-level">
-          <div id="audio-level-fill" style="height: 100%; width: 0%; background: linear-gradient(90deg, #00d17f, #f0ad4e); transition: width 100ms ease;"></div>
+          <div id="audio-level-fill"></div>
         </div>
         <small id="audio-status" style="min-width: 60px;">Off</small>
       </div>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -12,6 +12,38 @@
   --accent-green: #00d17f;
   --accent-yellow: #f0ad4e;
   --accent-red: #e55353;
+  --jog-hi: #2a3444;
+  --jog-lo: #1a2230;
+  --jog-shadow: rgba(0,0,0,0.3);
+  --jog-inset: rgba(255,255,255,0.05);
+  --audio-level-bg: #1f2937;
+  --audio-level-border: #2d3748;
+  --audio-level-fill-start: #00d17f;
+  --audio-level-fill-end: #f0ad4e;
+}
+
+[data-theme="light"] {
+  --bg: #edf2f7;
+  --card-bg: #ffffff;
+  --input-bg: #f7fafc;
+  --border: #d6deea;
+  --border-light: #bcc8da;
+  --text: #1a202c;
+  --text-muted: #4a5568;
+  --text-heading: #2d3748;
+  --btn-bg: #e6edf8;
+  --btn-border: #a9b8cf;
+  --accent-green: #0f9d61;
+  --accent-yellow: #b57600;
+  --accent-red: #cf3f3f;
+  --jog-hi: #e6edf8;
+  --jog-lo: #cdd9eb;
+  --jog-shadow: rgba(58, 79, 110, 0.18);
+  --jog-inset: rgba(255,255,255,0.75);
+  --audio-level-bg: #edf2fb;
+  --audio-level-border: #b8c5da;
+  --audio-level-fill-start: #0f9d61;
+  --audio-level-fill-end: #b57600;
 }
 
 body { font-family: sans-serif; margin: 0; min-height: 100vh; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding-top: 2em; background: var(--bg); color: var(--text); }
@@ -61,12 +93,12 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
   width: 83.2px;
   height: 83.2px;
   border-radius: 50%;
-  background: radial-gradient(circle at 40% 35%, #2a3444, #1a2230);
+  background: radial-gradient(circle at 40% 35%, var(--jog-hi), var(--jog-lo));
   border: 2px solid var(--border-light);
   position: relative;
   cursor: grab;
   flex-shrink: 0;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
+  box-shadow: 0 2px 8px var(--jog-shadow), inset 0 1px 0 var(--jog-inset);
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
@@ -177,7 +209,31 @@ small { color: var(--text-muted); }
   height: 100%;
   display: block;
 }
+.header-right {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+  flex-shrink: 0;
+}
 .header-logo { height: 6em; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
+.theme-toggle-btn {
+  height: 1.7rem;
+  min-height: 1.7rem;
+  padding: 0 0.65rem;
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  border-radius: 999px;
+  border: 1px solid var(--btn-border);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--btn-bg) 82%, #ffffff), var(--btn-bg));
+  color: var(--text);
+}
+[data-theme="light"] .theme-toggle-btn {
+  background: linear-gradient(135deg, #0f172a, #334155);
+  border-color: #334155;
+  color: #f8fafc;
+}
 .subtitle { color: var(--text-muted); font-size: 0.95rem; }
 .subtitle a { color: var(--accent-green); text-decoration: none; }
 .subtitle a:hover { text-decoration: underline; }
@@ -250,6 +306,21 @@ small { color: var(--text-muted); }
   border: none;
   cursor: pointer;
 }
+#audio-level {
+  flex: 1 1 auto;
+  height: 12px;
+  border-radius: 999px;
+  background: var(--audio-level-bg);
+  border: 1px solid var(--audio-level-border);
+  overflow: hidden;
+  min-width: 80px;
+}
+#audio-level-fill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, var(--audio-level-fill-start), var(--audio-level-fill-end));
+  transition: width 100ms ease;
+}
 
 .sub-tab-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
 .sub-tab { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.35rem 0.75rem; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; height: auto; }
@@ -308,6 +379,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   input.status-input, select.status-input { font-size: 1.1rem; }
   .header-text { width: auto; min-width: 0; flex: 0 1 auto; }
   .header-signal-wrap { display: none; }
+  .header-right { align-items: flex-end; }
   .controls-row { grid-template-columns: 1fr auto; }
   .controls-col-power { grid-column: 1 / -1; }
   .ft8-controls { flex-wrap: wrap; }