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?