diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 48153af8f8..0bc34ec734 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -29,6 +29,7 @@ import { LovelaceCard } from "../types";
 import { EntityConfig } from "../entity-rows/types";
 import { processConfigEntities } from "../common/process-config-entities";
 import { MapCardConfig } from "./types";
+import { classMap } from "lit-html/directives/class-map";
 
 @customElement("hui-map-card")
 class HuiMapCard extends LitElement implements LovelaceCard {
@@ -138,7 +139,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card id="card" .header=${this._config.title}>
         <div id="root">
-          <div id="map"></div>
+          <div
+            id="map"
+            class=${classMap({ dark: this._config.dark_mode === true })}
+          ></div>
           <paper-icon-button
             @click=${this._fitMap}
             icon="hass:image-filter-center-focus"
@@ -431,6 +435,11 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         left: 0;
         width: 100%;
         height: 100%;
+        background: #fafaf8;
+      }
+
+      #map.dark {
+        background: #090909;
       }
 
       paper-icon-button {