From 54999a52b708e5a4ec9fe98b16083863c9ee6a5c Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Thu, 5 Feb 2026 16:50:51 +0000
Subject: [PATCH] feat(dees-geo-map): Add dark/light theme support for UI and
 map tiles, subscribe to theme changes and add traffic toggle in navigation

---
 changelog.md                                  |   9 +
 readme.hints.md                               |  20 ++
 ts_web/00_commitinfo_data.ts                  |   2 +-
 ts_web/elements/00componentstyles.ts          | 265 +++++++++++-------
 .../00group-map/dees-geo-map/dees-geo-map.ts  |  91 ++++--
 .../dees-geo-map/geo-map.navigation.ts        |  21 ++
 6 files changed, 275 insertions(+), 133 deletions(-)

diff --git a/changelog.md b/changelog.md
index faac312..47206b0 100644
--- 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
 
diff --git a/readme.hints.md b/readme.hints.md
index ac6fe9b..4afe549 100644
--- 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.
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index f36a8d2..0ee1185 100644
--- 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'
 }
diff --git a/ts_web/elements/00componentstyles.ts b/ts_web/elements/00componentstyles.ts
index e77ba9b..a03d027 100644
--- 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)')};
   }
 `;
diff --git 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
index 69500fd..335a3d0 100644
--- 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"
diff --git 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
index f1c87ec..d553df9 100644
--- 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)}