diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts
index 10702cbf55..e0f1c1d8f3 100644
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -133,7 +133,7 @@ export class HaLocationsEditor extends LitElement {
         .layers=${this._getLayers(this._circles, this._locationMarkers)}
         .zoom=${this.zoom}
         .autoFit=${this.autoFit}
-        .darkMode=${this.darkMode}
+        ?darkMode=${this.darkMode}
       ></ha-map>
       ${this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts
index e9abacec5b..42834dbe69 100644
--- a/src/components/map/ha-map.ts
+++ b/src/components/map/ha-map.ts
@@ -156,9 +156,9 @@ export class HaMap extends ReactiveElement {
   }
 
   private _updateMapStyle(): void {
-    const darkMode = this.darkMode ?? this.hass.themes.darkMode ?? false;
-    const forcedDark = this.darkMode ?? false;
-    const map = this.shadowRoot!.getElementById("map");
+    const darkMode = this.darkMode || (this.hass.themes.darkMode ?? false);
+    const forcedDark = this.darkMode;
+    const map = this.renderRoot.querySelector("#map");
     map!.classList.toggle("dark", darkMode);
     map!.classList.toggle("forced-dark", forcedDark);
   }
@@ -361,7 +361,7 @@ export class HaMap extends ReactiveElement {
     );
 
     const className =
-      this.darkMode ?? this.hass.themes.darkMode ? "dark" : "light";
+      this.darkMode || this.hass.themes.darkMode ? "dark" : "light";
 
     for (const entity of this.entities) {
       const stateObj = hass.states[getEntityId(entity)];
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index c3076985f4..f5ea4f1a10 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -166,7 +166,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
             .paths=${this._getHistoryPaths(this._config, this._stateHistory)}
             .autoFit=${this._config.auto_fit || false}
             .fitZones=${this._config.fit_zones}
-            .darkMode=${this._config.dark_mode}
+            ?darkMode=${this._config.dark_mode}
             interactiveZones
             renderPassive
           ></ha-map>