diff --git a/src/common/dom/setup-leaflet-map.ts b/src/common/dom/setup-leaflet-map.ts
index 70d282d1b2..bbbb03a104 100644
--- a/src/common/dom/setup-leaflet-map.ts
+++ b/src/common/dom/setup-leaflet-map.ts
@@ -4,7 +4,8 @@ import { Map } from "leaflet";
export type LeafletModuleType = typeof import("leaflet");
export const setupLeafletMap = async (
- mapElement: HTMLElement
+ mapElement: HTMLElement,
+ darkMode = false
): Promise<[Map, LeafletModuleType]> => {
if (!mapElement.parentNode) {
throw new Error("Cannot setup Leaflet map on disconnected element");
@@ -20,9 +21,9 @@ export const setupLeafletMap = async (
mapElement.parentNode.appendChild(style);
map.setView([52.3731339, 4.8903147], 13);
Leaflet.tileLayer(
- `https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}${
- Leaflet.Browser.retina ? "@2x.png" : ".png"
- }`,
+ `https://{s}.basemaps.cartocdn.com/${
+ darkMode ? "dark_all" : "light_all"
+ }/{z}/{x}/{y}${Leaflet.Browser.retina ? "@2x.png" : ".png"}`,
{
attribution:
'© OpenStreetMap, © CARTO',
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index cc6db16db0..9211cb1d7c 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -180,7 +180,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
}
private async loadMap(): Promise {
- [this._leafletMap, this.Leaflet] = await setupLeafletMap(this._mapEl);
+ [this._leafletMap, this.Leaflet] = await setupLeafletMap(
+ this._mapEl,
+ this._config !== undefined ? this._config.dark_mode !== false : false
+ );
this._drawEntities();
this._leafletMap.invalidateSize();
this._fitMap();
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index 93240c6d16..06bd48569a 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -109,6 +109,7 @@ export interface MapCardConfig extends LovelaceCardConfig {
default_zoom?: number;
entities?: Array;
geo_location_sources?: string[];
+ dark_mode?: boolean;
}
export interface MarkdownCardConfig extends LovelaceCardConfig {
diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
index 0e43e36e88..1533baab38 100644
--- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
@@ -37,6 +37,7 @@ const cardConfigStruct = struct({
title: "string?",
aspect_ratio: "string?",
default_zoom: "number?",
+ dark_mode: "boolean?",
entities: [entitiesConfigStruct],
geo_location_sources: "array?",
});
@@ -71,6 +72,10 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
return this._config!.geo_location_sources || [];
}
+ get _dark_mode(): boolean {
+ return this._config!.dark_mode || false;
+ }
+
protected render(): TemplateResult | void {
if (!this.hass) {
return html``;
@@ -100,6 +105,12 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
@value-changed="${this._valueChanged}"
>
+ Dark Mode?