From ec9fafc36227ca7c2ce5fcc3ff96776bfeddf5f5 Mon Sep 17 00:00:00 2001
From: pablorevilla-meshtastic <pablorevilla@gmail.com>
Date: Wed, 28 Oct 2026 10:10:17 -0700
Subject: [PATCH] change icon on light mode

---
 meshview/static/api-chat.html        | 6 +++++-
 meshview/static/api.html             | 6 +++++-
 meshview/static/heatmap.html         | 6 +++++-
 meshview/static/kiosk.html           | 6 +++++-
 meshview/static/theme.js             | 1 -
 meshview/templates/base.html         | 2 +-
 meshview/templates/theme-styles.html | 4 ++++
 7 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/meshview/static/api-chat.html b/meshview/static/api-chat.html
index d00af2b..26747ec 100644
--- a/meshview/static/api-chat.html
+++ b/meshview/static/api-chat.html
@@ -63,6 +63,10 @@ body { background:var(--mesh-page); color:var(--mesh-text); }
 .mesh-theme-toggle { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid #ffffff70; border-radius:6px; background:transparent; color:white; font:22px/1 system-ui,sans-serif; cursor:pointer; }
 .mesh-header .mesh-theme-toggle { margin-left:auto; }
 .mesh-theme-toggle:hover { background:#ffffff20; }
+.mesh-theme-toggle .theme-icon { width:22px; height:22px; flex-shrink:0; }
+.mesh-theme-toggle .theme-icon--sun { display:none; }
+[data-bs-theme="dark"] .mesh-theme-toggle .theme-icon--sun { display:block; }
+[data-bs-theme="dark"] .mesh-theme-toggle .theme-icon--moon { display:none; }
 .mesh-theme-toggle:focus-visible { outline:2px solid white; outline-offset:3px; }
 @media(max-width:1000px) { .mesh-header .mesh-menu-toggle { margin-left:auto; } .mesh-header .mesh-theme-toggle { margin-left:12px; } .mesh-header #site-menu { order:4; } }
 [data-bs-theme="dark"] :is(.chat-status,.chat-details,.chat-channel,.chat-status[data-state="paused"],.chat-status[data-state="loading"],.good-x) { background:var(--mesh-soft); color:var(--mesh-primary); border-color:var(--mesh-border); }
@@ -88,7 +92,7 @@ body { background:var(--mesh-page); color:var(--mesh-text); }
 <!-- mesh-theme:end -->
 </head>
 <body>
-<button class="mesh-theme-toggle" style="position:fixed;top:12px;right:12px;z-index:2000;background:#187346" type="button" data-theme-toggle aria-label="Switch to night mode" aria-pressed="false">☾</button><main>
+<button class="mesh-theme-toggle" style="position:fixed;top:12px;right:12px;z-index:2000;background:#187346" type="button" data-theme-toggle aria-label="Switch to night mode" aria-pressed="false"><svg class="theme-icon theme-icon--sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/></svg><svg class="theme-icon theme-icon--moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13Z"/></svg></button><main>
 <h1>Chat messages API</h1>
 <p>Chat uses <code>GET /api/packets?portnum=1</code>. There is no separate <code>/api/chat</code> endpoint.</p>
 <p>Use <code>limit</code> and <code>since</code> for incremental polling. Direct port-1 text messages are returned as <code>&lt;redacted&gt;</code>.</p>
diff --git a/meshview/static/api.html b/meshview/static/api.html
index c8a5b53..26054ef 100644
--- a/meshview/static/api.html
+++ b/meshview/static/api.html
@@ -87,6 +87,10 @@ body { background:var(--mesh-page); color:var(--mesh-text); }
 .mesh-theme-toggle { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid #ffffff70; border-radius:6px; background:transparent; color:white; font:22px/1 system-ui,sans-serif; cursor:pointer; }
 .mesh-header .mesh-theme-toggle { margin-left:auto; }
 .mesh-theme-toggle:hover { background:#ffffff20; }
+.mesh-theme-toggle .theme-icon { width:22px; height:22px; flex-shrink:0; }
+.mesh-theme-toggle .theme-icon--sun { display:none; }
+[data-bs-theme="dark"] .mesh-theme-toggle .theme-icon--sun { display:block; }
+[data-bs-theme="dark"] .mesh-theme-toggle .theme-icon--moon { display:none; }
 .mesh-theme-toggle:focus-visible { outline:2px solid white; outline-offset:3px; }
 @media(max-width:1000px) { .mesh-header .mesh-menu-toggle { margin-left:auto; } .mesh-header .mesh-theme-toggle { margin-left:12px; } .mesh-header #site-menu { order:4; } }
 [data-bs-theme="dark"] :is(.chat-status,.chat-details,.chat-channel,.chat-status[data-state="paused"],.chat-status[data-state="loading"],.good-x) { background:var(--mesh-soft); color:var(--mesh-primary); border-color:var(--mesh-border); }
@@ -111,7 +115,7 @@ body { background:var(--mesh-page); color:var(--mesh-text); }
 
 </head>
 <body>
-<header><div class="header-inner"><a class="brand" href="/"><img src="/static/meshview-icon.svg" alt="" width="32" height="32">Meshview</a><span>API reference</span><a class="home-link" href="/">Home ↗</a><button class="mesh-theme-toggle" type="button" data-theme-toggle aria-label="Switch to night mode" aria-pressed="false">☾</button></div></header>
+<header><div class="header-inner"><a class="brand" href="/"><img src="/static/meshview-icon.svg" alt="" width="32" height="32">Meshview</a><span>API reference</span><a class="home-link" href="/">Home ↗</a><button class="mesh-theme-toggle" type="button" data-theme-toggle aria-label="Switch to night mode" aria-pressed="false"><svg class="theme-icon theme-icon--sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/></svg><svg class="theme-icon theme-icon--moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13Z"/></svg></button></div></header>
 <main>
 <details class="api-index"><summary>Browse all 16 endpoints</summary><nav aria-label="API endpoints"><ul><li><a href="#get-api-nodes">GET /api/nodes</a></li><li><a href="#get-api-packets">GET /api/packets</a></li><li><a href="#get-api-channels">GET /api/channels</a></li><li><a href="#get-api-stats">GET /api/stats</a></li><li><a href="#get-api-stats-count">GET /api/stats/count</a></li><li><a href="#get-api-stats-top">GET /api/stats/top</a></li><li><a href="#get-api-edges">GET /api/edges</a></li><li><a href="#get-api-snapshots-daily">GET /api/snapshots/daily</a></li><li><a href="#get-api-config">GET /api/config</a></li><li><a href="#get-api-lang">GET /api/lang</a></li><li><a href="#get-api-packets-seen-packet-id">GET /api/packets_seen/{packet_id}</a></li><li><a href="#get-api-traceroute-packet-id">GET /api/traceroute/{packet_id}</a></li><li><a href="#get-health">GET /health</a></li><li><a href="#get-version">GET /version</a></li><li><a href="#get-api-node-node-id-qr">GET /api/node/{node_id}/qr</a></li><li><a href="#get-api-coverage-node-id">GET /api/coverage/{node_id}</a></li></ul></nav></details>
 <h1 id="api-documentation">API Documentation</h1>
diff --git a/meshview/static/heatmap.html b/meshview/static/heatmap.html
index 75d9fe0..a6de43b 100644
--- a/meshview/static/heatmap.html
+++ b/meshview/static/heatmap.html
@@ -70,6 +70,10 @@ body { background:var(--mesh-page); color:var(--mesh-text); }
 .mesh-theme-toggle { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid #ffffff70; border-radius:6px; background:transparent; color:white; font:22px/1 system-ui,sans-serif; cursor:pointer; }
 .mesh-header .mesh-theme-toggle { margin-left:auto; }
 .mesh-theme-toggle:hover { background:#ffffff20; }
+.mesh-theme-toggle .theme-icon { width:22px; height:22px; flex-shrink:0; }
+.mesh-theme-toggle .theme-icon--sun { display:none; }
+[data-bs-theme="dark"] .mesh-theme-toggle .theme-icon--sun { display:block; }
+[data-bs-theme="dark"] .mesh-theme-toggle .theme-icon--moon { display:none; }
 .mesh-theme-toggle:focus-visible { outline:2px solid white; outline-offset:3px; }
 @media(max-width:1000px) { .mesh-header .mesh-menu-toggle { margin-left:auto; } .mesh-header .mesh-theme-toggle { margin-left:12px; } .mesh-header #site-menu { order:4; } }
 [data-bs-theme="dark"] :is(.chat-status,.chat-details,.chat-channel,.chat-status[data-state="paused"],.chat-status[data-state="loading"],.good-x) { background:var(--mesh-soft); color:var(--mesh-primary); border-color:var(--mesh-border); }
@@ -95,7 +99,7 @@ body { background:var(--mesh-page); color:var(--mesh-text); }
 <!-- mesh-theme:end -->
 </head>
 <body>
-<button class="mesh-theme-toggle" style="position:fixed;top:12px;right:12px;z-index:2000;background:#187346" type="button" data-theme-toggle aria-label="Switch to night mode" aria-pressed="false">☾</button>
+<button class="mesh-theme-toggle" style="position:fixed;top:12px;right:12px;z-index:2000;background:#187346" type="button" data-theme-toggle aria-label="Switch to night mode" aria-pressed="false"><svg class="theme-icon theme-icon--sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/></svg><svg class="theme-icon theme-icon--moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13Z"/></svg></button>
 <div id="map"></div>
 <div id="legend"></div>
 
diff --git a/meshview/static/kiosk.html b/meshview/static/kiosk.html
index 729d741..1912a39 100644
--- a/meshview/static/kiosk.html
+++ b/meshview/static/kiosk.html
@@ -84,6 +84,10 @@ body { background:var(--mesh-page); color:var(--mesh-text); }
 .mesh-theme-toggle { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid #ffffff70; border-radius:6px; background:transparent; color:white; font:22px/1 system-ui,sans-serif; cursor:pointer; }
 .mesh-header .mesh-theme-toggle { margin-left:auto; }
 .mesh-theme-toggle:hover { background:#ffffff20; }
+.mesh-theme-toggle .theme-icon { width:22px; height:22px; flex-shrink:0; }
+.mesh-theme-toggle .theme-icon--sun { display:none; }
+[data-bs-theme="dark"] .mesh-theme-toggle .theme-icon--sun { display:block; }
+[data-bs-theme="dark"] .mesh-theme-toggle .theme-icon--moon { display:none; }
 .mesh-theme-toggle:focus-visible { outline:2px solid white; outline-offset:3px; }
 @media(max-width:1000px) { .mesh-header .mesh-menu-toggle { margin-left:auto; } .mesh-header .mesh-theme-toggle { margin-left:12px; } .mesh-header #site-menu { order:4; } }
 [data-bs-theme="dark"] :is(.chat-status,.chat-details,.chat-channel,.chat-status[data-state="paused"],.chat-status[data-state="loading"],.good-x) { background:var(--mesh-soft); color:var(--mesh-primary); border-color:var(--mesh-border); }
@@ -109,7 +113,7 @@ body { background:var(--mesh-page); color:var(--mesh-text); }
 <!-- mesh-theme:end -->
 </head>
 <body>
-<button class="mesh-theme-toggle" style="position:fixed;top:12px;right:12px;z-index:2000;background:#187346" type="button" data-theme-toggle aria-label="Switch to night mode" aria-pressed="false">☾</button>
+<button class="mesh-theme-toggle" style="position:fixed;top:12px;right:12px;z-index:2000;background:#187346" type="button" data-theme-toggle aria-label="Switch to night mode" aria-pressed="false"><svg class="theme-icon theme-icon--sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/></svg><svg class="theme-icon theme-icon--moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13Z"/></svg></button>
 
 <div id="map"></div>
 
diff --git a/meshview/static/theme.js b/meshview/static/theme.js
index 8fd5c3d..0dc044a 100644
--- a/meshview/static/theme.js
+++ b/meshview/static/theme.js
@@ -57,7 +57,6 @@
     function updateButton() {
         document.querySelectorAll('[data-theme-toggle]').forEach(button => {
             const dark = root.dataset.bsTheme === 'dark';
-            button.textContent = dark ? '☀' : '☾';
             button.setAttribute('aria-label',dark ? 'Switch to day mode' : 'Switch to night mode');
             button.setAttribute('aria-pressed',String(dark));
             button.title = dark ? 'Day mode' : 'Night mode';
diff --git a/meshview/templates/base.html b/meshview/templates/base.html
index 9d55da7..7e8eef2 100644
--- a/meshview/templates/base.html
+++ b/meshview/templates/base.html
@@ -166,7 +166,7 @@ input[type="checkbox"],input[type="radio"] { accent-color:var(--mesh-primary); }
         <a class="mesh-brand" href="/"><img class="mesh-brand-icon" src="/static/meshview-icon.svg" width="32" height="32" alt=""> <span id="site-header">Meshview</span></a>
         <button class="mesh-menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false" aria-controls="site-menu">☰</button>
         <nav id="site-menu" aria-label="Main navigation"></nav>
-        <button class="mesh-theme-toggle" type="button" data-theme-toggle aria-label="Switch to night mode" aria-pressed="false" title="Night mode">☾</button>
+        <button class="mesh-theme-toggle" type="button" data-theme-toggle aria-label="Switch to night mode" aria-pressed="false" title="Night mode"><svg class="theme-icon theme-icon--sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"/></svg><svg class="theme-icon theme-icon--moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13Z"/></svg></button>
     </div>
 </header>
 <div id="site-message" class="mesh-announcement"></div>
diff --git a/meshview/templates/theme-styles.html b/meshview/templates/theme-styles.html
index 69391da..607de3e 100644
--- a/meshview/templates/theme-styles.html
+++ b/meshview/templates/theme-styles.html
@@ -47,6 +47,10 @@ body { background:var(--mesh-page); color:var(--mesh-text); }
 .mesh-theme-toggle { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid #ffffff70; border-radius:6px; background:transparent; color:white; font:22px/1 system-ui,sans-serif; cursor:pointer; }
 .mesh-header .mesh-theme-toggle { margin-left:auto; }
 .mesh-theme-toggle:hover { background:#ffffff20; }
+.mesh-theme-toggle .theme-icon { width:22px; height:22px; flex-shrink:0; }
+.mesh-theme-toggle .theme-icon--sun { display:none; }
+[data-bs-theme="dark"] .mesh-theme-toggle .theme-icon--sun { display:block; }
+[data-bs-theme="dark"] .mesh-theme-toggle .theme-icon--moon { display:none; }
 .mesh-theme-toggle:focus-visible { outline:2px solid white; outline-offset:3px; }
 @media(max-width:1000px) { .mesh-header .mesh-menu-toggle { margin-left:auto; } .mesh-header .mesh-theme-toggle { margin-left:12px; } .mesh-header #site-menu { order:4; } }
 [data-bs-theme="dark"] :is(.chat-status,.chat-details,.chat-channel,.chat-status[data-state="paused"],.chat-status[data-state="loading"],.good-x) { background:var(--mesh-soft); color:var(--mesh-primary); border-color:var(--mesh-border); }