feat(dees-geo-map): Add dark/light theme support for UI and map tiles, subscribe to theme changes and add traffic toggle in navigation

2026-02-05 16:50:51 +00:00
parent 32454a7d19
commit 54999a52b7
6 changed files with 275 additions and 133 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,14 @@
 # Changelog

+## 2026-02-05 - 1.3.0 - feat(dees-geo-map)
+Add dark/light theme support for UI and map tiles, subscribe to theme changes and add traffic toggle in navigation
+
+- Replace hard-coded colors with cssManager.bdTheme(...) across component styles to enable automatic light/dark theming
+- When mapStyle is 'osm', switch between CartoDB Voyager (light) and CartoDB Dark Matter (dark) vector basemaps
+- Subscribe to domtools.themeManager.themeObservable to update the map style at runtime and unsubscribe on disconnectedCallback
+- Add a traffic-aware routing toggle in the navigation panel and expose callbacks (onTrafficToggle, getTrafficEnabled) to wire UI state to the trafficController
+- Integrate traffic toggle state into navigation controller callbacks and simplify traffic controller render usage
+
 ## 2026-02-05 - 1.2.0 - feat(map)
 Introduce CSS Grid sidebar layout and integrated navigation + draw panels, add directions view and step-to-map interaction

--- a/readme.hints.md
+++ b/readme.hints.md
@@ -260,6 +260,26 @@ The component uses a CSS Grid layout with sidebars that **push** the map (not ov
 - `z-index: 10` - Header toolbar
 - `z-index: 5` - Map overlays (traffic legend, feature count)

+### Dark/Light Theme Support
+
+The component fully supports automatic dark/light theme switching:
+
+**UI Elements Theming:**
+- All UI elements (toolbar, panels, search, navigation) use `cssManager.bdTheme()` for automatic color switching
+- Pattern: `cssManager.bdTheme('lightValue', 'darkValue')` - first arg is light theme, second is dark
+
+**Map Tiles Theming:**
+- When `mapStyle="osm"` (default), the map automatically switches between:
+  - **Light theme**: CartoDB Voyager GL (vector tiles) - clean, detailed style
+  - **Dark theme**: CartoDB Dark Matter GL (vector tiles) - sleek dark style
+- Theme changes are detected via `domtools.themeManager.themeObservable`
+- No API key required for CartoDB basemaps
+
+**Semantic Colors (unchanged by theme):**
+- Navigation markers: Green (#22c55e) for start, Red (#ef4444) for end
+- Route line: Blue (#3b82f6) with dark outline (#1e40af)
+- Traffic congestion: Green → Yellow → Orange → Red → Dark Red (universal traffic colors)
+
 ### Shadow DOM & Terra-Draw Drawing Fix
 Terra-draw's event listeners normally intercept map events through MapLibre's canvas element. In Shadow DOM contexts, these events are scoped locally and don't propagate correctly, causing terra-draw handlers to fail while MapLibre's drag handlers continue working.

--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog-geo',
-  version: '1.2.0',
+  version: '1.3.0',
  description: 'A geospatial web components library with MapLibre GL JS maps and terra-draw drawing tools'
 }
--- a/ts_web/elements/00componentstyles.ts
+++ b/ts_web/elements/00componentstyles.ts
@@ -1,4 +1,4 @@
-import { css } from '@design.estate/dees-element';
+import { css, cssManager } from '@design.estate/dees-element';

 /**
 * Shared component styles for geo components
@@ -103,8 +103,8 @@ export const toolbarStyles = css`
    flex-direction: column;
    gap: 4px;
    padding: 8px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -120,7 +120,7 @@ export const toolbarStyles = css`
  .toolbar-divider {
    height: 1px;
    margin: 4px 0;
-    background: var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .tool-button {
@@ -133,13 +133,13 @@ export const toolbarStyles = css`
    border: none;
    border-radius: 6px;
    background: transparent;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .tool-button:hover {
-    background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
  }

  .tool-button.active {
@@ -170,8 +170,8 @@ export const searchStyles = css`
  .search-input-wrapper {
    display: flex;
    align-items: center;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -187,7 +187,7 @@ export const searchStyles = css`
    justify-content: center;
    width: 36px;
    height: 36px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
    flex-shrink: 0;
  }

@@ -202,14 +202,14 @@ export const searchStyles = css`
    padding: 0 12px 0 0;
    border: none;
    background: transparent;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    font-size: 13px;
    font-family: inherit;
    outline: none;
  }

  .search-input::placeholder {
-    color: rgba(255, 255, 255, 0.4);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
  }

  .search-spinner {
@@ -224,7 +224,7 @@ export const searchStyles = css`
  .search-spinner svg {
    width: 16px;
    height: 16px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
    animation: spin 1s linear infinite;
  }

@@ -243,15 +243,15 @@ export const searchStyles = css`
    border: none;
    border-radius: 4px;
    background: transparent;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .search-clear:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
  }

  .search-clear svg {
@@ -266,8 +266,8 @@ export const searchStyles = css`
    right: 0;
    max-height: 300px;
    overflow-y: auto;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -285,7 +285,7 @@ export const searchStyles = css`
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.1s ease;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
  }

  .search-result:last-child {
@@ -294,25 +294,25 @@ export const searchStyles = css`

  .search-result:hover,
  .search-result.highlighted {
-    background: rgba(255, 255, 255, 0.1);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
  }

  .search-result-name {
    font-size: 13px;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    line-height: 1.3;
  }

  .search-result-type {
    font-size: 11px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    text-transform: capitalize;
  }

  .search-no-results {
    padding: 12px;
    text-align: center;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    font-size: 13px;
  }
 `;
@@ -323,8 +323,8 @@ export const searchStyles = css`
 export const navigationStyles = css`
  .navigation-panel {
    width: 300px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -337,7 +337,7 @@ export const navigationStyles = css`
    align-items: center;
    gap: 8px;
    padding: 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .nav-header-icon {
@@ -357,14 +357,14 @@ export const navigationStyles = css`
  .nav-header-title {
    font-size: 13px;
    font-weight: 600;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
  }

  .nav-mode-selector {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .nav-mode-btn {
@@ -377,15 +377,15 @@ export const navigationStyles = css`
    border: none;
    border-radius: 6px;
    background: transparent;
-    color: rgba(255, 255, 255, 0.6);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.6)')};
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .nav-mode-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.9);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.8)', 'rgba(255, 255, 255, 0.9)')};
  }

  .nav-mode-btn.active {
@@ -398,6 +398,67 @@ export const navigationStyles = css`
    height: 16px;
  }

+  /* Traffic toggle in navigation panel */
+  .nav-traffic-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+  }
+
+  .nav-traffic-toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
+  }
+
+  .nav-traffic-toggle-label svg {
+    width: 14px;
+    height: 14px;
+    color: var(--geo-tool-active, #0084ff);
+  }
+
+  .nav-traffic-toggle-btn {
+    position: relative;
+    width: 36px;
+    height: 20px;
+    border: none;
+    border-radius: 10px;
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.2)')};
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    padding: 0;
+  }
+
+  .nav-traffic-toggle-btn.active {
+    background: var(--geo-tool-active, #0084ff);
+  }
+
+  .toggle-track {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .toggle-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border-radius: 50%;
+    transition: transform 0.2s ease;
+  }
+
+  .nav-traffic-toggle-btn.active .toggle-thumb {
+    transform: translateX(16px);
+  }
+
  .nav-inputs {
    padding: 12px;
    display: flex;
@@ -437,10 +498,10 @@ export const navigationStyles = css`
    width: 100%;
    height: 36px;
    padding: 0 36px 0 12px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
    border-radius: 6px;
-    background: rgba(0, 0, 0, 0.2);
-    color: var(--geo-text, #fff);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    font-size: 13px;
    font-family: inherit;
    outline: none;
@@ -452,7 +513,7 @@ export const navigationStyles = css`
  }

  .nav-input::placeholder {
-    color: rgba(255, 255, 255, 0.4);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
  }

  .nav-input.has-value {
@@ -472,14 +533,14 @@ export const navigationStyles = css`
    border: none;
    border-radius: 4px;
    background: transparent;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.5)')};
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .nav-set-map-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.9);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.8)', 'rgba(255, 255, 255, 0.9)')};
  }

  .nav-set-map-btn.active {
@@ -505,13 +566,13 @@ export const navigationStyles = css`
    border: none;
    border-radius: 4px;
    background: transparent;
-    color: rgba(255, 255, 255, 0.4);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.4)')};
    cursor: pointer;
    transition: color 0.15s ease;
  }

  .nav-input-clear:hover {
-    color: rgba(255, 255, 255, 0.8);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
  }

  .nav-input-clear svg {
@@ -526,8 +587,8 @@ export const navigationStyles = css`
    right: 0;
    max-height: 200px;
    overflow-y: auto;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.98));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.98)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 6px;
    z-index: 20;
  }
@@ -539,7 +600,7 @@ export const navigationStyles = css`
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.1s ease;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
  }

  .nav-search-result:last-child {
@@ -548,12 +609,12 @@ export const navigationStyles = css`

  .nav-search-result:hover,
  .nav-search-result.highlighted {
-    background: rgba(255, 255, 255, 0.1);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
  }

  .nav-search-result-name {
    font-size: 12px;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
@@ -562,7 +623,7 @@ export const navigationStyles = css`

  .nav-search-result-type {
    font-size: 10px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    text-transform: capitalize;
  }

@@ -602,12 +663,12 @@ export const navigationStyles = css`
  }

  .nav-action-btn.secondary {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
  }

  .nav-action-btn.secondary:hover {
-    background: rgba(255, 255, 255, 0.15);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.15)')};
  }

  .nav-action-btn svg {
@@ -622,8 +683,8 @@ export const navigationStyles = css`
    gap: 16px;
    padding: 12px;
    background: rgba(0, 132, 255, 0.1);
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .nav-summary-item {
@@ -632,7 +693,7 @@ export const navigationStyles = css`
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
  }

  .nav-summary-item svg {
@@ -650,7 +711,7 @@ export const navigationStyles = css`
    display: flex;
    gap: 12px;
    padding: 10px 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
    transition: background-color 0.15s ease;
    cursor: pointer;
  }
@@ -660,7 +721,7 @@ export const navigationStyles = css`
  }

  .nav-step:hover {
-    background: rgba(255, 255, 255, 0.05);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
  }

  .nav-step-icon {
@@ -670,8 +731,8 @@ export const navigationStyles = css`
    width: 28px;
    height: 28px;
    border-radius: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
    font-size: 14px;
    flex-shrink: 0;
  }
@@ -683,14 +744,14 @@ export const navigationStyles = css`

  .nav-step-instruction {
    font-size: 13px;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    line-height: 1.4;
    margin-bottom: 2px;
  }

  .nav-step-distance {
    font-size: 11px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
  }

  .nav-error {
@@ -716,7 +777,7 @@ export const navigationStyles = css`
    justify-content: center;
    gap: 8px;
    padding: 16px;
-    color: rgba(255, 255, 255, 0.6);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.6)')};
    font-size: 13px;
  }

@@ -729,7 +790,7 @@ export const navigationStyles = css`
  .nav-empty-steps {
    padding: 16px 12px;
    text-align: center;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    font-size: 12px;
  }

@@ -739,7 +800,7 @@ export const navigationStyles = css`
    align-items: center;
    gap: 12px;
    padding: 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .nav-back-btn {
@@ -750,15 +811,15 @@ export const navigationStyles = css`
    height: 32px;
    border: none;
    border-radius: 6px;
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--geo-text, #fff);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    cursor: pointer;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
  }

  .nav-back-btn:hover {
-    background: rgba(255, 255, 255, 0.2);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.2)')};
  }

  .nav-back-btn svg {
@@ -774,7 +835,7 @@ export const navigationStyles = css`
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
  }

  .nav-directions-summary svg {
@@ -784,7 +845,7 @@ export const navigationStyles = css`
  }

  .nav-directions-separator {
-    color: rgba(255, 255, 255, 0.4);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.3)', 'rgba(255, 255, 255, 0.4)')};
    margin: 0 4px;
  }

@@ -852,12 +913,12 @@ export const navigationStyles = css`

  .nav-traffic-text {
    font-size: 12px;
-    color: rgba(255, 255, 255, 0.8);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
  }

  .nav-traffic-delay {
    font-size: 11px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    margin-left: auto;
  }
 `;
@@ -888,8 +949,8 @@ export const headerToolbarStyles = css`
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
-    border-bottom: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    min-height: 52px;
    position: relative;
    z-index: 10;
@@ -919,7 +980,7 @@ export const headerToolbarStyles = css`
  .header-toolbar .toolbar-divider {
    width: 1px;
    height: 24px;
-    background: rgba(255, 255, 255, 0.15);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
    margin: 0 4px;
  }

@@ -934,13 +995,13 @@ export const headerToolbarStyles = css`
    border: none;
    border-radius: 6px;
    background: transparent;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .header-toolbar .tool-button:hover {
-    background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
  }

  .header-toolbar .tool-button.active {
@@ -967,8 +1028,8 @@ export const headerToolbarStyles = css`
  /* Left Sidebar - Navigation Panel */
  .left-sidebar {
    grid-area: left-panel;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
-    border-right: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
+    border-right: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    overflow: hidden;
    display: flex;
    flex-direction: column;
@@ -994,8 +1055,8 @@ export const headerToolbarStyles = css`
  /* Right Sidebar - Draw Panel */
  .right-sidebar {
    grid-area: right-panel;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.95));
-    border-left: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.98)', 'rgba(30, 30, 30, 0.95)')};
+    border-left: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    overflow: hidden;
    display: flex;
    flex-direction: column;
@@ -1021,7 +1082,7 @@ export const headerToolbarStyles = css`
    align-items: center;
    gap: 8px;
    padding: 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .draw-panel-header-icon {
@@ -1041,7 +1102,7 @@ export const headerToolbarStyles = css`
  .draw-panel-header-title {
    font-size: 13px;
    font-weight: 600;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
  }

  .draw-tools-grid {
@@ -1058,17 +1119,17 @@ export const headerToolbarStyles = css`
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    background: transparent;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .draw-tool-button:hover {
-    background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
-    border-color: rgba(255, 255, 255, 0.2);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+    border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.2)')};
  }

  .draw-tool-button.active {
@@ -1096,7 +1157,7 @@ export const headerToolbarStyles = css`
  .draw-panel-divider {
    height: 1px;
    margin: 4px 12px;
-    background: rgba(255, 255, 255, 0.1);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
  }

  .draw-panel-actions {
@@ -1112,10 +1173,10 @@ export const headerToolbarStyles = css`
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    background: transparent;
-    color: var(--geo-text, #fff);
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
@@ -1123,8 +1184,8 @@ export const headerToolbarStyles = css`
  }

  .draw-action-button:hover {
-    background: var(--geo-tool-hover, rgba(255, 255, 255, 0.1));
-    border-color: rgba(255, 255, 255, 0.2);
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+    border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.2)')};
  }

  .draw-action-button.active {
@@ -1145,7 +1206,7 @@ export const headerToolbarStyles = css`
  .draw-action-button.danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
-    color: #fca5a5;
+    color: ${cssManager.bdTheme('#dc2626', '#fca5a5')};
  }

  /* Map container takes grid area */
@@ -1177,9 +1238,9 @@ export const trafficStyles = css`
    padding: 0;
    border: none;
    border-radius: 8px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
-    color: var(--geo-text, #fff);
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -1187,7 +1248,7 @@ export const trafficStyles = css`
  }

  .traffic-toggle-btn:hover:not(:disabled) {
-    background: var(--geo-tool-hover, rgba(255, 255, 255, 0.15));
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.15)')};
  }

  .traffic-toggle-btn.active {
@@ -1215,7 +1276,7 @@ export const trafficStyles = css`
    justify-content: center;
    width: 14px;
    height: 14px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
    border-radius: 50%;
  }

@@ -1230,8 +1291,8 @@ export const trafficStyles = css`
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -1252,7 +1313,7 @@ export const trafficStyles = css`

  .traffic-status-text {
    font-size: 11px;
-    color: rgba(255, 255, 255, 0.7);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
  }

  .traffic-error {
@@ -1273,8 +1334,8 @@ export const trafficStyles = css`
  /* Traffic Legend */
  .traffic-legend {
    padding: 10px 12px;
-    background: var(--geo-toolbar-bg, rgba(30, 30, 30, 0.9));
-    border: 1px solid var(--geo-toolbar-border, rgba(255, 255, 255, 0.1));
+    background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+    border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
@@ -1285,7 +1346,7 @@ export const trafficStyles = css`
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)')};
    margin-bottom: 8px;
  }

@@ -1300,7 +1361,7 @@ export const trafficStyles = css`
    align-items: center;
    gap: 8px;
    font-size: 11px;
-    color: rgba(255, 255, 255, 0.8);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
  }

  .traffic-legend-color {
@@ -1312,8 +1373,8 @@ export const trafficStyles = css`
  .traffic-legend-updated {
    margin-top: 8px;
    padding-top: 8px;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
    font-size: 10px;
-    color: rgba(255, 255, 255, 0.4);
+    color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.4)', 'rgba(255, 255, 255, 0.4)')};
  }
 `;
--- a/ts_web/elements/00group-map/dees-geo-map/dees-geo-map.ts
+++ b/ts_web/elements/00group-map/dees-geo-map/dees-geo-map.ts
@@ -8,6 +8,7 @@ import {
  type TemplateResult,
  cssManager,
  css,
+  domtools,
 } from '@design.estate/dees-element';
 import { DeesContextmenu } from '@design.estate/dees-catalog';
 import { geoComponentStyles, mapContainerStyles, toolbarStyles, searchStyles, navigationStyles, trafficStyles, headerToolbarStyles } from '../../00componentstyles.js';
@@ -175,41 +176,63 @@ export class DeesGeoMap extends DeesElement {

      .maplibregl-ctrl-attrib {
        font-size: 11px;
-        background: rgba(0, 0, 0, 0.5);
-        color: rgba(255, 255, 255, 0.8);
+        background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.8)', 'rgba(0, 0, 0, 0.5)')};
+        color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
        padding: 2px 6px;
        border-radius: 4px;
      }

      .maplibregl-ctrl-attrib a {
-        color: rgba(255, 255, 255, 0.8);
+        color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.7)', 'rgba(255, 255, 255, 0.8)')};
      }

      .feature-count {
        padding: 6px 12px;
-        background: rgba(30, 30, 30, 0.9);
-        border: 1px solid rgba(255, 255, 255, 0.1);
+        background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(30, 30, 30, 0.9)')};
+        border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
        border-radius: 6px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        font-size: 12px;
-        color: rgba(255, 255, 255, 0.7);
+        color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.6)', 'rgba(255, 255, 255, 0.7)')};
      }
    `,
  ];

+  // Map theme subscription for cleanup
+  private mapThemeSubscription: { unsubscribe: () => void } | null = null;
+
  // ─── Lifecycle ──────────────────────────────────────────────────────────────

  public async firstUpdated() {
    this.initializeControllers();
    await this.initializeMap();
+
+    // Subscribe to theme changes to update map style
+    this.subscribeToThemeChanges();
  }

  public async disconnectedCallback() {
    await super.disconnectedCallback();
+    if (this.mapThemeSubscription) {
+      this.mapThemeSubscription.unsubscribe();
+      this.mapThemeSubscription = null;
+    }
    this.cleanup();
  }

+  /**
+   * Subscribe to theme changes via domtools
+   */
+  private async subscribeToThemeChanges(): Promise<void> {
+    const domtoolsInstance = await domtools.DomTools.setupDomTools();
+    this.mapThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe(
+      (_goBright: boolean) => {
+        this.updateMapStyleForTheme();
+      }
+    );
+  }
+
  public updated(changedProperties: Map<string, unknown>) {
    super.updated(changedProperties);
    if (changedProperties.has('dragToDraw') && this.draw && this.map) {
@@ -293,11 +316,21 @@ export class DeesGeoMap extends DeesElement {
      getMap: () => this.map,
      // Connect traffic controller for traffic-aware routing
      getTrafficRoute: async (start, end, mode) => {
-        if (this.trafficController?.supportsTrafficRouting()) {
+        if (this.showTraffic && this.trafficController?.supportsTrafficRouting()) {
          return this.trafficController.fetchRouteWithTraffic(start, end, mode);
        }
        return null;
      },
+      // Traffic toggle callbacks
+      onTrafficToggle: (enabled) => {
+        if (enabled) {
+          this.trafficController?.enable();
+        } else {
+          this.trafficController?.disable();
+        }
+        this.showTraffic = enabled;
+      },
+      getTrafficEnabled: () => this.showTraffic,
    });
    this.navigationController.navigationMode = this.navigationMode;

@@ -377,30 +410,30 @@ export class DeesGeoMap extends DeesElement {

  private getMapStyle(): maplibregl.StyleSpecification | string {
    if (this.mapStyle === 'osm') {
-      return {
-        version: 8,
-        sources: {
-          'osm-tiles': {
-            type: 'raster',
-            tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
-            tileSize: 256,
-            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-          },
-        },
-        layers: [
-          {
-            id: 'osm-tiles',
-            type: 'raster',
-            source: 'osm-tiles',
-            minzoom: 0,
-            maxzoom: 19,
-          },
-        ],
-      };
+      // Check current theme and use appropriate tiles
+      const isDarkTheme = !cssManager.goBright;
+
+      if (isDarkTheme) {
+        // CartoDB Dark Matter GL vector style - high quality dark theme
+        return 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
+      } else {
+        // CartoDB Voyager GL vector style - high quality light theme
+        return 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
+      }
    }
    return this.mapStyle;
  }

+  /**
+   * Update the map style when theme changes
+   */
+  private updateMapStyleForTheme(): void {
+    if (!this.map || !this.isMapReady || this.mapStyle !== 'osm') return;
+
+    const newStyle = this.getMapStyle();
+    this.map.setStyle(newStyle as maplibregl.StyleSpecification);
+  }
+
  // ─── Terra Draw Initialization ──────────────────────────────────────────────

  private initializeTerraDraw() {
@@ -934,9 +967,7 @@ export class DeesGeoMap extends DeesElement {
              ${renderIcon('polygon')}
            </button>
          ` : ''}
-          ${showTrafficControls && this.trafficController
-            ? this.trafficController.render()
-            : ''}
+          ${this.trafficController?.render()}
          <div class="toolbar-divider"></div>
          <button
            class="tool-button"
--- a/ts_web/elements/00group-map/dees-geo-map/geo-map.navigation.ts
+++ b/ts_web/elements/00group-map/dees-geo-map/geo-map.navigation.ts
@@ -65,6 +65,10 @@ export interface INavigationControllerCallbacks {
    end: [number, number],
    mode: TNavigationMode
  ) => Promise<ITrafficAwareRoute | null>;
+  /** Optional callback when traffic toggle is changed */
+  onTrafficToggle?: (enabled: boolean) => void;
+  /** Optional callback to get current traffic state */
+  getTrafficEnabled?: () => boolean;
 }

 /**
@@ -832,6 +836,7 @@ export class NavigationController {
  private renderPlanningView(extraClass?: string): TemplateResult {
    const { isLoading, error, startPoint, endPoint } = this.navigationState;
    const canCalculate = startPoint && endPoint && !isLoading;
+    const trafficEnabled = this.callbacks.getTrafficEnabled?.() ?? false;

    return html`
      <div class="navigation-panel ${extraClass || ''}">
@@ -864,6 +869,22 @@ export class NavigationController {
          </button>
        </div>

+        <div class="nav-traffic-toggle">
+          <div class="nav-traffic-toggle-label">
+            ${renderIcon('traffic')}
+            <span>Traffic-aware routing</span>
+          </div>
+          <button
+            class="nav-traffic-toggle-btn ${trafficEnabled ? 'active' : ''}"
+            @click=${() => this.callbacks.onTrafficToggle?.(!trafficEnabled)}
+            title="${trafficEnabled ? 'Disable traffic' : 'Enable traffic'}"
+          >
+            <span class="toggle-track">
+              <span class="toggle-thumb"></span>
+            </span>
+          </button>
+        </div>
+
        <div class="nav-inputs">
          ${this.renderNavInput('start', 'Start point', this.navStartSearchQuery, this.navStartSearchResults)}
          ${this.renderNavInput('end', 'End point', this.navEndSearchQuery, this.navEndSearchResults)}