From cbe934ef6ee71a73e2d7db09f5694eab2e95f033 Mon Sep 17 00:00:00 2001
From: ppfeiffer <admin@pfeiffer-privat.de>
Date: Fri, 20 Feb 2026 22:26:53 +0100
Subject: [PATCH] fix(map): Kartenlegende theme-aware (closes #5)

- style.css: .legend nutzt CSS-Variablen (--tblr-bg-surface, --tblr-border-color,
  --tblr-body-color) statt hardcodierter Hex-Farben
- map.js: legendDiv-Referenz, updateLegendTheme() setzt Inline-Styles;
  wird beim onAdd (Init) und im themechange-Listener aufgerufen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md         |  9 +++++++++
 config/config.yaml   |  2 +-
 static/css/style.css | 13 +++----------
 static/js/map.js     | 25 +++++++++++++++++++++----
 4 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88694a0..5368c00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.08.23] - 2026-02-20
+
+### Fixed
+- **Karte: Legende theme-aware** (closes #5): `.legend` nutzt jetzt
+  `var(--tblr-bg-surface/border-color/body-color)` statt hardcodierter Farben.
+  `map.js` speichert die Legende als `legendDiv` und aktualisiert per
+  `updateLegendTheme()` Inline-Styles beim Init und bei jedem `themechange`-Event –
+  zuverlässig auch im Leaflet-Control-Kontext.
+
 ## [0.08.22] - 2026-02-20
 
 ### Changed
diff --git a/config/config.yaml b/config/config.yaml
index 64ac69d..09d7ff7 100644
--- a/config/config.yaml
+++ b/config/config.yaml
@@ -1,4 +1,4 @@
-version: "0.08.22"
+version: "0.08.23"
 
 bot:
   name: "MeshDD-Bot"
diff --git a/static/css/style.css b/static/css/style.css
index 1bf9deb..cd9573e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -263,27 +263,20 @@
 .node-tooltip-wrap { padding: 0; }
 
 .legend {
-    background: #ffffff;
-    border: 1px solid rgba(0,0,0,.12);
+    background: var(--tblr-bg-surface, #ffffff);
+    border: 1px solid var(--tblr-border-color, rgba(0,0,0,.12));
     border-radius: 6px;
     box-shadow: 0 2px 10px rgba(0,0,0,.15);
     padding: 7px 10px;
     font-size: 11.5px;
     line-height: 1.4;
     min-width: 100px;
-    color: #212529;
+    color: var(--tblr-body-color, #212529);
 }
 
 [data-bs-theme="dark"] .legend {
-    background: #1e2128;
-    border-color: rgba(255,255,255,.1);
-    color: #c8d3e1;
     box-shadow: 0 2px 12px rgba(0,0,0,.45);
 }
-
-[data-bs-theme="dark"] .legend-section {
-    color: #6c7a8d;
-}
 .legend-section {
     font-size: 9.5px;
     font-weight: 700;
diff --git a/static/js/map.js b/static/js/map.js
index 1033938..67793cc 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -140,9 +140,22 @@ function connectWebSocket() {
 }
 
 // Legend
+let legendDiv = null;
+
+const LEGEND_LIGHT = { bg: 'var(--tblr-bg-surface, #ffffff)', border: 'var(--tblr-border-color, rgba(0,0,0,.12))', color: 'var(--tblr-body-color, #212529)' };
+const LEGEND_DARK  = { bg: 'var(--tblr-bg-surface, #1e2128)', border: 'var(--tblr-border-color, rgba(255,255,255,.1))', color: 'var(--tblr-body-color, #c8d3e1)' };
+
+function updateLegendTheme(theme) {
+    if (!legendDiv) return;
+    const c = theme === 'dark' ? LEGEND_DARK : LEGEND_LIGHT;
+    legendDiv.style.background  = c.bg;
+    legendDiv.style.borderColor = c.border;
+    legendDiv.style.color       = c.color;
+}
+
 const legend = L.control({ position: 'topleft' });
 legend.onAdd = function () {
-    const div = L.DomUtil.create('div', 'legend');
+    legendDiv = L.DomUtil.create('div', 'legend');
     const hopEntries = [
         [0,    'Direkt'],
         [1,    '1 Hop'],
@@ -157,7 +170,7 @@ legend.onAdd = function () {
         ['rgba(80,80,80,.45)', '24–48h'],
         ['rgba(80,80,80,.18)', '48–72h'],
     ];
-    div.innerHTML =
+    legendDiv.innerHTML =
         '<div class="legend-section">Hops</div>' +
         hopEntries.map(([hop, label]) => {
             const color = hop != null ? (hopColors[hop] || hopColorDefault) : hopColorDefault;
@@ -167,7 +180,8 @@ legend.onAdd = function () {
         ageEntries.map(([color, label]) =>
             `<div class="legend-item"><span class="legend-dot" style="background:${color}"></span>${label}</div>`
         ).join('');
-    return div;
+    updateLegendTheme(localStorage.getItem('theme') || 'dark');
+    return legendDiv;
 };
 
 // Init map after layout is ready
@@ -197,7 +211,10 @@ setMapTheme(localStorage.getItem('theme') || 'dark');
 
 legend.addTo(map);
 
-document.addEventListener('themechange', (e) => setMapTheme(e.detail.theme));
+document.addEventListener('themechange', (e) => {
+    setMapTheme(e.detail.theme);
+    updateLegendTheme(e.detail.theme);
+});
 
 // Invalidate size after short delay so sidebar layout settles
 setTimeout(() => { map.invalidateSize(); }, 200);