From 4e97e3763ee390b0d7925557a1e7659fd98671e1 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 24 Apr 2024 14:28:33 +0200 Subject: [PATCH] Use theme mode property for ha-map (#20606) * Use theme mode property for ha-map * Use theme mode in ha-location-editor --------- Co-authored-by: Bram Kragten --- src/components/map/ha-locations-editor.ts | 7 +-- src/components/map/ha-map.ts | 52 +++++++++++------------ src/onboarding/onboarding-location.ts | 4 +- src/panels/lovelace/cards/hui-map-card.ts | 7 +-- 4 files changed, 34 insertions(+), 36 deletions(-) diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts index b2c63c394c0a..db80ec76a920 100644 --- a/src/components/map/ha-locations-editor.ts +++ b/src/components/map/ha-locations-editor.ts @@ -19,7 +19,7 @@ import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../common/dom/fire_event"; import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map"; -import type { HomeAssistant } from "../../types"; +import type { HomeAssistant, ThemeMode } from "../../types"; import "../ha-input-helper-text"; import "./ha-map"; import type { HaMap } from "./ha-map"; @@ -61,7 +61,8 @@ export class HaLocationsEditor extends LitElement { @property({ type: Number }) public zoom = 16; - @property({ type: Boolean }) public darkMode = false; + @property({ attribute: "theme-mode", type: String }) + public themeMode: ThemeMode = "auto"; @state() private _locationMarkers?: Record; @@ -133,7 +134,7 @@ export class HaLocationsEditor extends LitElement { .layers=${this._getLayers(this._circles, this._locationMarkers)} .zoom=${this.zoom} .autoFit=${this.autoFit} - ?forceDarkMode=${this.darkMode} + .themeMode=${this.themeMode} > ${this.helper ? html`${this.helper}` diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index c4704dc798db..ace050182240 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -1,32 +1,32 @@ +import { isToday } from "date-fns"; import type { Circle, CircleMarker, - LatLngTuple, LatLngExpression, + LatLngTuple, Layer, Map, Marker, Polyline, } from "leaflet"; -import { isToday } from "date-fns"; -import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit"; +import { CSSResultGroup, PropertyValues, ReactiveElement, css } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { formatDateTime } from "../../common/datetime/format_date_time"; +import { + formatTimeWeekday, + formatTimeWithSeconds, +} from "../../common/datetime/format_time"; import { LeafletModuleType, setupLeafletMap, } from "../../common/dom/setup-leaflet-map"; -import { - formatTimeWithSeconds, - formatTimeWeekday, -} from "../../common/datetime/format_time"; -import { formatDateTime } from "../../common/datetime/format_date_time"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateName } from "../../common/entity/compute_state_name"; import { loadPolyfillIfNeeded } from "../../resources/resize-observer.polyfill"; -import { HomeAssistant } from "../../types"; +import { HomeAssistant, ThemeMode } from "../../types"; +import { isTouch } from "../../util/is_touch"; import "../ha-icon-button"; import "./ha-entity-marker"; -import { isTouch } from "../../util/is_touch"; const getEntityId = (entity: string | HaMapEntity): string => typeof entity === "string" ? entity : entity.entity_id; @@ -69,9 +69,8 @@ export class HaMap extends ReactiveElement { @property({ type: Boolean }) public fitZones = false; - @property({ type: Boolean }) public forceDarkMode = false; - - @property({ type: Boolean }) public forceLightMode = false; + @property({ attribute: "theme-mode", type: String }) + public themeMode: ThemeMode = "auto"; @property({ type: Number }) public zoom = 14; @@ -156,8 +155,7 @@ export class HaMap extends ReactiveElement { } if ( - !changedProps.has("forceDarkMode") && - !changedProps.has("forceLightMode") && + !changedProps.has("themeMode") && (!changedProps.has("hass") || (oldHass && oldHass.themes?.darkMode === this.hass.themes?.darkMode)) ) { @@ -166,14 +164,18 @@ export class HaMap extends ReactiveElement { this._updateMapStyle(); } + private get _darkMode() { + return ( + this.themeMode === "dark" || + (this.themeMode === "auto" && Boolean(this.hass.themes.darkMode)) + ); + } + private _updateMapStyle(): void { - const darkMode = - !this.forceLightMode && - (this.forceDarkMode || (this.hass.themes.darkMode ?? false)); const map = this.renderRoot.querySelector("#map"); - map!.classList.toggle("dark", darkMode); - map!.classList.toggle("forced-dark", this.forceDarkMode); - map!.classList.toggle("forced-light", this.forceLightMode); + map!.classList.toggle("dark", this._darkMode); + map!.classList.toggle("forced-dark", this.themeMode === "dark"); + map!.classList.toggle("forced-light", this.themeMode === "light"); } private async _loadMap(): Promise { @@ -403,13 +405,7 @@ export class HaMap extends ReactiveElement { "--dark-primary-color" ); - const className = this.forceLightMode - ? "light" - : this.forceDarkMode - ? "dark" - : this.hass.themes.darkMode - ? "dark" - : "light"; + const className = this._darkMode ? "dark" : "light"; for (const entity of this.entities) { const stateObj = hass.states[getEntityId(entity)]; diff --git a/src/onboarding/onboarding-location.ts b/src/onboarding/onboarding-location.ts index 3027a93f9e5a..f4c8d505b703 100644 --- a/src/onboarding/onboarding-location.ts +++ b/src/onboarding/onboarding-location.ts @@ -41,7 +41,7 @@ import type { HomeAssistant } from "../types"; import { onBoardingStyles } from "./styles"; const AMSTERDAM: [number, number] = [52.3731339, 4.8903147]; -const mql = matchMedia("(prefers-color-scheme: dark)"); +const darkMql = matchMedia("(prefers-color-scheme: dark)"); const LOCATION_MARKER_ID = "location"; @customElement("onboarding-location") @@ -199,7 +199,7 @@ class OnboardingLocation extends LitElement { this._highlightedMarker )} zoom="14" - .darkMode=${mql.matches} + .themeMode=${darkMql.matches ? "dark" : "light"} .disabled=${this._working} @location-updated=${this._locationChanged} @marker-clicked=${this._markerClicked} diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index c0b769b81840..65189e351360 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -159,6 +159,9 @@ class HuiMapCard extends LitElement implements LovelaceCard { ? false : this.hass.themes.darkMode; + const themeMode = + this._config.theme_mode || (this._config.dark_mode ? "dark" : "auto"); + return html`
@@ -169,9 +172,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} - ?forceDarkMode=${this._config.theme_mode === "dark" || - this._config.dark_mode} - ?forceLightMode=${this._config.theme_mode === "light"} + .themeMode=${themeMode} interactiveZones renderPassive >