Karte: Legende Hintergrund theme-aware korrigieren #5

New issue

Closed

opened 2026-02-20 21:16:51 +01:00 by ppfeiffer · 1 comment

ppfeiffer commented

2026-02-20 21:16:51 +01:00

Owner

Problem

Der Hintergrund der Kartenlegende wird nicht korrekt an das aktive Theme (Light/Dark) angepasst.

Ursachen

Hardcodierte Farben: .legend hat background: #ffffff (Light) und [data-bs-theme="dark"] .legend hat background: #1e2128 (Dark). Das Weiß im Light-Mode passt nicht zum Tabler-Hintergrundton.
Kein JS-Update beim Theme-Wechsel: map.js reagiert auf themechange nur mit setMapTheme() (Kachel-Tausch). Die Legende selbst wird nicht aktualisiert – sie verlässt sich ausschließlich auf CSS, was in Leaflets eigenem Rendering-Kontext unzuverlässig ist.
Leaflet-Control-Kontext: Leaflet rendert Controls in position: absolute-Containern innerhalb des Map-Div. Eigene Leaflet-Styles können die Hintergrundfarbe überschreiben oder CSS-Variablen nicht auflösen.

Lösung

static/js/map.js

themechange-Listener um explizites Setzen der Legende erweitern:

document.addEventListener('themechange', (e) => {
    setMapTheme(e.detail.theme);
    updateLegendTheme(e.detail.theme);
});

Funktion updateLegendTheme(theme) per L.DomUtil den Hintergrund direkt auf dem Legend-Element setzen
Beim Init (legend.onAdd) ebenfalls das Theme aus localStorage direkt anwenden

static/css/style.css

Hintergrundfarben an Tabler-Werte angleichen:
- Light-Mode: passend zum Tabler-Card-Hintergrund (z. B. var(--tblr-bg-surface) oder #ffffff mit korrektem Border)
- Dark-Mode: passend zur Tabler-Dark-Card (z. B. var(--tblr-bg-surface) im Dark-Kontext)
Alternativ: CSS-Variablen nutzen die im Leaflet-Control-Container zuverlässig aufgelöst werden

Betroffene Dateien

static/js/map.js – Legend-Init und themechange-Handler
static/css/style.css – .legend und [data-bs-theme="dark"] .legend

## Problem Der Hintergrund der Kartenlegende wird nicht korrekt an das aktive Theme (Light/Dark) angepasst. ### Ursachen 1. **Hardcodierte Farben**: `.legend` hat `background: #ffffff` (Light) und `[data-bs-theme="dark"] .legend` hat `background: #1e2128` (Dark). Das Weiß im Light-Mode passt nicht zum Tabler-Hintergrundton. 2. **Kein JS-Update beim Theme-Wechsel**: `map.js` reagiert auf `themechange` nur mit `setMapTheme()` (Kachel-Tausch). Die Legende selbst wird nicht aktualisiert – sie verlässt sich ausschließlich auf CSS, was in Leaflets eigenem Rendering-Kontext unzuverlässig ist. 3. **Leaflet-Control-Kontext**: Leaflet rendert Controls in `position: absolute`-Containern innerhalb des Map-Div. Eigene Leaflet-Styles können die Hintergrundfarbe überschreiben oder CSS-Variablen nicht auflösen. ## Lösung ### static/js/map.js - `themechange`-Listener um explizites Setzen der Legende erweitern: ```js document.addEventListener('themechange', (e) => { setMapTheme(e.detail.theme); updateLegendTheme(e.detail.theme); }); ``` - Funktion `updateLegendTheme(theme)` per `L.DomUtil` den Hintergrund direkt auf dem Legend-Element setzen - Beim Init (`legend.onAdd`) ebenfalls das Theme aus `localStorage` direkt anwenden ### static/css/style.css - Hintergrundfarben an Tabler-Werte angleichen: - Light-Mode: passend zum Tabler-Card-Hintergrund (z. B. `var(--tblr-bg-surface)` oder `#ffffff` mit korrektem Border) - Dark-Mode: passend zur Tabler-Dark-Card (z. B. `var(--tblr-bg-surface)` im Dark-Kontext) - Alternativ: CSS-Variablen nutzen die im Leaflet-Control-Container zuverlässig aufgelöst werden ## Betroffene Dateien - `static/js/map.js` – Legend-Init und `themechange`-Handler - `static/css/style.css` – `.legend` und `[data-bs-theme="dark"] .legend`

ppfeiffer referenced this issue from a commit

2026-02-20 22:26:56 +01:00

fix(map): Kartenlegende theme-aware (closes #5)

ppfeiffer closed this issue

2026-02-20 22:26:56 +01:00

ppfeiffer commented

2026-02-20 22:27:13 +01:00

Author

Owner

Implementierung abgeschlossen (v0.08.23)

static/css/style.css

.legend: Hardcodierte Farben ersetzt durch CSS-Variablen:
- background: var(--tblr-bg-surface, #ffffff)
- border-color: var(--tblr-border-color, rgba(0,0,0,.12))
- color: var(--tblr-body-color, #212529)
[data-bs-theme="dark"] .legend: Nur noch Box-Shadow-Anpassung nötig – Farben kommen aus den CSS-Variablen

static/js/map.js

legendDiv als Modul-Variable gespeichert
Neue Funktion updateLegendTheme(theme): setzt Inline-Styles direkt auf dem Leaflet-Control-Element (zuverlässig auch im Leaflet-Rendering-Kontext)
legend.onAdd: ruft updateLegendTheme() beim Init mit dem gespeicherten Theme auf
themechange-Listener: ruft zusätzlich updateLegendTheme() auf

## Implementierung abgeschlossen (v0.08.23) ### static/css/style.css - `.legend`: Hardcodierte Farben ersetzt durch CSS-Variablen: - `background: var(--tblr-bg-surface, #ffffff)` - `border-color: var(--tblr-border-color, rgba(0,0,0,.12))` - `color: var(--tblr-body-color, #212529)` - `[data-bs-theme="dark"] .legend`: Nur noch Box-Shadow-Anpassung nötig – Farben kommen aus den CSS-Variablen ### static/js/map.js - `legendDiv` als Modul-Variable gespeichert - Neue Funktion `updateLegendTheme(theme)`: setzt Inline-Styles direkt auf dem Leaflet-Control-Element (zuverlässig auch im Leaflet-Rendering-Kontext) - `legend.onAdd`: ruft `updateLegendTheme()` beim Init mit dem gespeicherten Theme auf - `themechange`-Listener: ruft zusätzlich `updateLegendTheme()` auf

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: ppfeiffer/MeshDD-Bot#5

No description provided.