card level themes (#4057)

* card level themes

weather-forecast
shopping-list
plant-status
markdown
alarm-panel

* fix markdown

* address comments

also added picture cards

* update updated

* address comments

* address comments

hassio/src/hassio-main.ts

@@ -3,7 +3,7 @@ import { PolymerElement } from "@polymer/polymer";
 import "@polymer/paper-icon-button";
 
 import "../../src/resources/ha-style";
-import applyThemesOnElement from "../../src/common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
 import {
   HassRouterPage,

src/common/dom/apply_themes_on_element.ts

@@ -21,12 +21,12 @@ const hexToRgb = (hex: string): string | null => {
  * localTheme: selected theme.
  * updateMeta: boolean if we should update the theme-color meta element.
  */
-export default function applyThemesOnElement(
+export const applyThemesOnElement = (
   element,
   themes,
   localTheme,
   updateMeta = false
-) {
+) => {
   if (!element._themes) {
     element._themes = {};
   }
@@ -76,4 +76,4 @@ export default function applyThemesOnElement(
       styles["--primary-color"] || meta.getAttribute("default-content");
     meta.setAttribute("content", themeColor);
   }
-}
+};

src/fake_data/provide_hass.ts

@@ -1,4 +1,4 @@
-import applyThemesOnElement from "../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 
 import { demoConfig } from "./demo_config";
 import { demoServices } from "./demo_services";

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -22,6 +22,7 @@ import {
 } from "../../../data/alarm_control_panel";
 import { AlarmPanelCardConfig } from "./types";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 const ICONS = {
   armed_away: "hass:shield-lock",
@@ -81,20 +82,45 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     this._code = "";
   }
 
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | AlarmPanelCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+  }
+
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (changedProps.has("_config") || changedProps.has("_code")) {
       return true;
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (oldHass) {
+
+    if (
+      !oldHass ||
+      oldHass.themes !== this.hass!.themes ||
+      oldHass.language !== this.hass!.language
+    ) {
+      return true;
+    }
     return (
       oldHass.states[this._config!.entity] !==
       this.hass!.states[this._config!.entity]
     );
   }
-    return true;
-  }
 
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {

src/panels/lovelace/cards/hui-entities-card.ts

@@ -22,7 +22,7 @@ import { createRowElement } from "../common/create-row-element";
 import { EntitiesCardConfig, EntitiesCardEntityConfig } from "./types";
 
 import { computeDomain } from "../../../common/entity/compute_domain";
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 @customElement("hui-entities-card")
 class HuiEntitiesCard extends LitElement implements LovelaceCard {
@@ -71,9 +71,22 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     this._configEntities = entities;
   }
 
-  protected updated(changedProperties: PropertyValues): void {
+  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProperties);
+    super.updated(changedProps);
-    if (this._hass && this._config) {
+    if (!this._config || !this._hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | EntitiesCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
       applyThemesOnElement(this, this._hass.themes, this._config.theme);
     }
   }

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -19,7 +19,7 @@ import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { stateIcon } from "../../../common/entity/state_icon";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
 
 import { HomeAssistant, LightEntity } from "../../../types";
@@ -91,14 +91,20 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (oldHass) {
+
+    if (
+      !oldHass ||
+      oldHass.themes !== this.hass!.themes ||
+      oldHass.language !== this.hass!.language
+    ) {
+      return true;
+    }
+
     return (
       oldHass.states[this._config!.entity] !==
       this.hass!.states[this._config!.entity]
     );
   }
-    return true;
-  }
 
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
@@ -161,7 +167,16 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
       return;
     }
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.themes !== this.hass.themes) {
+    const oldConfig = changedProps.get("_config") as
+      | EntityButtonCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
     }
   }

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -14,7 +14,7 @@ import "../../../components/ha-card";
 import "../components/hui-warning";
 
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 
 import { HomeAssistant } from "../../../types";
@@ -149,8 +149,16 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | GaugeCardConfig
+      | undefined;
 
-    if (!oldHass || oldHass.themes !== this.hass.themes) {
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
     }
   }

src/panels/lovelace/cards/hui-glance-card.ts

@@ -11,7 +11,7 @@ import {
 import { classMap } from "lit-html/directives/class-map";
 
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import relativeTime from "../../../common/datetime/relative_time";
 
 import "../../../components/entity/state-badge";
@@ -87,18 +87,24 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (oldHass && this._configEntities) {
+
-      for (const entity of this._configEntities) {
     if (
-          oldHass.states[entity.entity] !== this.hass!.states[entity.entity]
+      !this._configEntities ||
+      !oldHass ||
+      oldHass.themes !== this.hass!.themes ||
+      oldHass.language !== this.hass!.language
     ) {
       return true;
     }
-      }
+
-      return false;
+    for (const entity of this._configEntities) {
-    }
+      if (oldHass.states[entity.entity] !== this.hass!.states[entity.entity]) {
         return true;
       }
+    }
+
+    return false;
+  }
 
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
@@ -117,14 +123,23 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  protected updated(changedProperties: PropertyValues): void {
+  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProperties);
+    super.updated(changedProps);
     if (!this._config || !this.hass) {
       return;
     }
 
-    const oldHass = changedProperties.get("hass") as HomeAssistant | undefined;
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.themes !== this.hass.themes) {
+    const oldConfig = changedProps.get("_config") as
+      | GlanceCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
     }
   }

src/panels/lovelace/cards/hui-light-card.ts

@@ -11,7 +11,7 @@ import "@thomasloven/round-slider";
 
 import { stateIcon } from "../../../common/entity/state_icon";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
@@ -145,7 +145,16 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.themes !== this.hass.themes) {
+    const oldConfig = changedProps.get("_config") as
+      | LightCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
     }
   }

src/panels/lovelace/cards/hui-markdown-card.ts

@@ -6,6 +6,7 @@ import {
   property,
   css,
   CSSResult,
+  PropertyValues,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
@@ -17,6 +18,7 @@ import { HomeAssistant } from "../../../types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { MarkdownCardConfig } from "./types";
 import { subscribeRenderTemplate } from "../../../data/ws-templates";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 @customElement("hui-markdown-card")
 export class HuiMarkdownCard extends LitElement implements LovelaceCard {
@@ -84,6 +86,26 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     `;
   }
 
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (!this._config || !this._hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | MarkdownCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
+      applyThemesOnElement(this, this._hass.themes, this._config.theme);
+    }
+  }
+
   private async _connect() {
     if (!this._unsubRenderTemplate && this._hass && this._config) {
       this._unsubRenderTemplate = subscribeRenderTemplate(

src/panels/lovelace/cards/hui-picture-card.ts

@@ -6,6 +6,7 @@ import {
   property,
   css,
   CSSResult,
+  PropertyValues,
 } from "lit-element";
 
 import "../../../components/ha-card";
@@ -17,6 +18,7 @@ import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { PictureCardConfig } from "./types";
 import { hasDoubleClick } from "../common/has-double-click";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 @customElement("hui-picture-card")
 export class HuiPictureCard extends LitElement implements LovelaceCard {
@@ -49,6 +51,26 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
     this._config = config;
   }
 
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | PictureCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -6,6 +6,7 @@ import {
   customElement,
   css,
   CSSResult,
+  PropertyValues,
 } from "lit-element";
 
 import { createStyledHuiElement } from "./picture-elements/create-styled-hui-element";
@@ -13,6 +14,7 @@ import { LovelaceCard } from "../types";
 import { HomeAssistant } from "../../../types";
 import { LovelaceElementConfig, LovelaceElement } from "../elements/types";
 import { PictureElementsCardConfig } from "./types";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 @customElement("hui-picture-elements-card")
 class HuiPictureElementsCard extends LitElement implements LovelaceCard {
@@ -49,6 +51,26 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     this._config = config;
   }
 
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (!this._config || !this._hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | PictureElementsCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
+      applyThemesOnElement(this, this._hass.themes, this._config.theme);
+    }
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config) {
       return html``;

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -26,6 +26,7 @@ import { UNAVAILABLE } from "../../../data/entity";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { PictureEntityCardConfig } from "./types";
 import { hasDoubleClick } from "../common/has-double-click";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 @customElement("hui-picture-entity-card")
 class HuiPictureEntityCard extends LitElement implements LovelaceCard {
@@ -68,6 +69,26 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     return hasConfigOrEntityChanged(this, changedProps);
   }
 
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | PictureEntityCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -28,6 +28,7 @@ import { handleClick } from "../common/handle-click";
 import { hasDoubleClick } from "../common/has-double-click";
 import { PictureGlanceCardConfig, PictureGlanceEntityConfig } from "./types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]);
 
@@ -93,6 +94,14 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
 
+    if (
+      !oldHass ||
+      oldHass.themes !== this.hass!.themes ||
+      oldHass.language !== this.hass!.language
+    ) {
+      return true;
+    }
+
     if (this._entitiesDialog) {
       for (const entity of this._entitiesDialog) {
         if (
@@ -116,6 +125,26 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
     return false;
   }
 
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | PictureGlanceCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/cards/hui-plant-status-card.ts

@@ -20,6 +20,7 @@ import { HomeAssistant } from "../../../types";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { PlantStatusCardConfig, PlantAttributeTarget } from "./types";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 const SENSORS = {
   moisture: "hass:water",
@@ -60,6 +61,26 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
     return hasConfigOrEntityChanged(this, changedProps);
   }
 
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | PlantStatusCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass || !this._config) {
       return html``;

src/panels/lovelace/cards/hui-sensor-card.ts

@@ -11,7 +11,7 @@ import {
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
 
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateIcon } from "../../../common/entity/state_icon";
 
@@ -277,7 +277,16 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.themes !== this.hass.themes) {
+    const oldConfig = changedProps.get("_config") as
+      | SensorCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
       applyThemesOnElement(this, this.hass.themes, this._config!.theme);
     }
 

src/panels/lovelace/cards/hui-shopping-list-card.ts

@@ -6,6 +6,7 @@ import {
   CSSResult,
   property,
   customElement,
+  PropertyValues,
 } from "lit-element";
 import { repeat } from "lit-html/directives/repeat";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -23,7 +24,8 @@ import {
   clearItems,
   addItem,
 } from "../../../data/shopping-list";
-import { ShoppingListCardConfig } from "./types";
+import { ShoppingListCardConfig, SensorCardConfig } from "./types";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 @customElement("hui-shopping-list-card")
 class HuiShoppingListCard extends LitElement implements LovelaceCard {
@@ -77,6 +79,26 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
     }
   }
 
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | SensorCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -16,7 +16,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import "../components/hui-warning";
 
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 
 import { hasConfigOrEntityChanged } from "../common/has-changed";
@@ -235,8 +235,16 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | ThermostatCardConfig
+      | undefined;
 
-    if (!oldHass || oldHass.themes !== this.hass.themes) {
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
     }
 

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -22,6 +22,7 @@ import { WeatherForecastCardConfig } from "./types";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { toggleAttribute } from "../../../common/dom/toggle_attribute";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 const cardinalDirections = [
   "N",
@@ -92,6 +93,23 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as
+      | WeatherForecastCardConfig
+      | undefined;
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this.hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+
     if (changedProps.has("hass")) {
       toggleAttribute(this, "rtl", computeRTL(this.hass!));
     }

src/panels/lovelace/cards/types.ts

@@ -8,6 +8,7 @@ export interface AlarmPanelCardConfig extends LovelaceCardConfig {
   entity: string;
   name?: string;
   states?: string[];
+  theme?: string;
 }
 
 export interface ConditionalCardConfig extends LovelaceCardConfig {
@@ -134,6 +135,7 @@ export interface MarkdownCardConfig extends LovelaceCardConfig {
   title?: string;
   card_size?: number;
   entity_ids?: string | string[];
+  theme?: string;
 }
 
 export interface MediaControlCardConfig extends LovelaceCardConfig {
@@ -145,6 +147,7 @@ export interface PictureCardConfig extends LovelaceCardConfig {
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
+  theme?: string;
 }
 
 export interface PictureElementsCardConfig extends LovelaceCardConfig {
@@ -157,6 +160,7 @@ export interface PictureElementsCardConfig extends LovelaceCardConfig {
   aspect_ratio?: string;
   entity?: string;
   elements: LovelaceElementConfig[];
+  theme?: string;
 }
 
 export interface PictureEntityCardConfig extends LovelaceCardConfig {
@@ -173,6 +177,7 @@ export interface PictureEntityCardConfig extends LovelaceCardConfig {
   double_tap_action?: ActionConfig;
   show_name?: boolean;
   show_state?: boolean;
+  theme?: string;
 }
 
 export interface PictureGlanceCardConfig extends LovelaceCardConfig {
@@ -189,6 +194,7 @@ export interface PictureGlanceCardConfig extends LovelaceCardConfig {
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
   show_state?: boolean;
+  theme?: string;
 }
 
 export interface PlantAttributeTarget extends EventTarget {
@@ -198,6 +204,7 @@ export interface PlantAttributeTarget extends EventTarget {
 export interface PlantStatusCardConfig extends LovelaceCardConfig {
   name?: string;
   entity: string;
+  theme?: string;
 }
 
 export interface SensorCardConfig extends LovelaceCardConfig {
@@ -213,6 +220,7 @@ export interface SensorCardConfig extends LovelaceCardConfig {
 
 export interface ShoppingListCardConfig extends LovelaceCardConfig {
   title?: string;
+  theme?: string;
 }
 
 export interface StackCardConfig extends LovelaceCardConfig {

src/panels/lovelace/common/has-changed.ts

@@ -15,6 +15,13 @@ export function hasConfigOrEntityChanged(
     return true;
   }
 
+  if (
+    oldHass.themes !== element.hass!.themes ||
+    oldHass.language !== element.hass!.language
+  ) {
+    return true;
+  }
+
   return (
     oldHass.states[element._config!.entity] !==
       element.hass!.states[element._config!.entity] ||

src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts

@@ -17,16 +17,18 @@ import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { configElementStyle } from "./config-elements-style";
+import { AlarmPanelCardConfig } from "../../cards/types";
 
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon";
-import { AlarmPanelCardConfig } from "../../cards/types";
+import "../../components/hui-theme-select-editor";
 
 const cardConfigStruct = struct({
   type: "string",
   entity: "string?",
   name: "string?",
   states: "array?",
+  theme: "string?",
 });
 
 @customElement("hui-alarm-panel-card-editor")
@@ -53,6 +55,10 @@ export class HuiAlarmPanelCardEditor extends LitElement
     return this._config!.states || [];
   }
 
+  get _theme(): string {
+    return this._config!.theme || "Backend-selected";
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -113,6 +119,12 @@ export class HuiAlarmPanelCardEditor extends LitElement
             })}
           </paper-listbox>
         </paper-dropdown-menu>
+        <hui-theme-select-editor
+          .hass="${this.hass}"
+          .value="${this._theme}"
+          .configValue="${"theme"}"
+          @theme-changed="${this._valueChanged}"
+        ></hui-theme-select-editor>
       </div>
     `;
   }

src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts

@@ -16,10 +16,13 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { configElementStyle } from "./config-elements-style";
 import { MarkdownCardConfig } from "../../cards/types";
 
+import "../../components/hui-theme-select-editor";
+
 const cardConfigStruct = struct({
   type: "string",
   title: "string?",
   content: "string",
+  theme: "string?",
 });
 
 @customElement("hui-markdown-card-editor")
@@ -42,6 +45,10 @@ export class HuiMarkdownCardEditor extends LitElement
     return this._config!.content || "";
   }
 
+  get _theme(): string {
+    return this._config!.theme || "Backend-selected";
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -73,6 +80,12 @@ export class HuiMarkdownCardEditor extends LitElement
           autocomplete="off"
           spellcheck="false"
         ></paper-textarea>
+        <hui-theme-select-editor
+          .hass="${this.hass}"
+          .value="${this._theme}"
+          .configValue="${"theme"}"
+          @theme-changed="${this._valueChanged}"
+        ></hui-theme-select-editor>
       </div>
     `;
   }

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -8,6 +8,7 @@ import {
 import "@polymer/paper-input/paper-input";
 
 import "../../components/hui-action-editor";
+import "../../components/hui-theme-select-editor";
 
 import { struct } from "../../common/structs/struct";
 import {
@@ -27,6 +28,7 @@ const cardConfigStruct = struct({
   image: "string?",
   tap_action: struct.optional(actionConfigStruct),
   hold_action: struct.optional(actionConfigStruct),
+  theme: "string?",
 });
 
 @customElement("hui-picture-card-editor")
@@ -53,6 +55,10 @@ export class HuiPictureCardEditor extends LitElement
     return this._config!.hold_action || { action: "none" };
   }
 
+  get _theme(): string {
+    return this._config!.theme || "Backend-selected";
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -98,6 +104,12 @@ export class HuiPictureCardEditor extends LitElement
             .configValue="${"hold_action"}"
             @action-changed="${this._valueChanged}"
           ></hui-action-editor>
+          <hui-theme-select-editor
+            .hass="${this.hass}"
+            .value="${this._theme}"
+            .configValue="${"theme"}"
+            @theme-changed="${this._valueChanged}"
+          ></hui-theme-select-editor>
         </div>
       </div>
     `;

src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts

@@ -13,6 +13,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../../../components/ha-switch";
+import "../../components/hui-theme-select-editor";
 
 import { struct } from "../../common/structs/struct";
 import {
@@ -39,6 +40,7 @@ const cardConfigStruct = struct({
   hold_action: struct.optional(actionConfigStruct),
   show_name: "boolean?",
   show_state: "boolean?",
+  theme: "string?",
 });
 
 @customElement("hui-picture-entity-card-editor")
@@ -93,6 +95,10 @@ export class HuiPictureEntityCardEditor extends LitElement
     return this._config!.show_state || true;
   }
 
+  get _theme(): string {
+    return this._config!.theme || "Backend-selected";
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -225,6 +231,12 @@ export class HuiPictureEntityCardEditor extends LitElement
             .configValue="${"hold_action"}"
             @action-changed="${this._valueChanged}"
           ></hui-action-editor>
+          <hui-theme-select-editor
+            .hass="${this.hass}"
+            .value="${this._theme}"
+            .configValue="${"theme"}"
+            @theme-changed="${this._valueChanged}"
+          ></hui-theme-select-editor>
         </div>
       </div>
     `;

src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts

@@ -13,6 +13,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../../../components/entity/ha-entity-picker";
+import "../../components/hui-theme-select-editor";
 
 import { struct } from "../../common/structs/struct";
 import {
@@ -41,6 +42,7 @@ const cardConfigStruct = struct({
   tap_action: struct.optional(actionConfigStruct),
   hold_action: struct.optional(actionConfigStruct),
   entities: [entitiesConfigStruct],
+  theme: "string?",
 });
 
 @customElement("hui-picture-glance-card-editor")
@@ -104,6 +106,10 @@ export class HuiPictureGlanceCardEditor extends LitElement
     return this._config!.show_state || false;
   }
 
+  get _theme(): string {
+    return this._config!.theme || "Backend-selected";
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -224,6 +230,12 @@ export class HuiPictureGlanceCardEditor extends LitElement
           .entities="${this._configEntities}"
           @entities-changed="${this._valueChanged}"
         ></hui-entity-editor>
+        <hui-theme-select-editor
+          .hass="${this.hass}"
+          .value="${this._theme}"
+          .configValue="${"theme"}"
+          @theme-changed="${this._valueChanged}"
+        ></hui-theme-select-editor>
       </div>
     `;
   }

src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts

@@ -9,6 +9,7 @@ import "@polymer/paper-input/paper-input";
 
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon";
+import "../../components/hui-theme-select-editor";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
@@ -22,6 +23,7 @@ const cardConfigStruct = struct({
   type: "string",
   entity: "string",
   name: "string?",
+  theme: "string?",
 });
 
 @customElement("hui-plant-status-card-editor")
@@ -44,6 +46,10 @@ export class HuiPlantStatusCardEditor extends LitElement
     return this._config!.name || "";
   }
 
+  get _theme(): string {
+    return this._config!.theme || "Backend-selected";
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -75,6 +81,12 @@ export class HuiPlantStatusCardEditor extends LitElement
           .configValue="${"name"}"
           @value-changed="${this._valueChanged}"
         ></paper-input>
+        <hui-theme-select-editor
+          .hass="${this.hass}"
+          .value="${this._theme}"
+          .configValue="${"theme"}"
+          @theme-changed="${this._valueChanged}"
+        ></hui-theme-select-editor>
       </div>
     `;
   }

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -14,9 +14,12 @@ import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ShoppingListCardConfig } from "../../cards/types";
 
+import "../../components/hui-theme-select-editor";
+
 const cardConfigStruct = struct({
   type: "string",
   title: "string?",
+  theme: "string?",
 });
 
 @customElement("hui-shopping-list-card-editor")
@@ -35,6 +38,10 @@ export class HuiShoppingListEditor extends LitElement
     return this._config!.title || "";
   }
 
+  get _theme(): string {
+    return this._config!.theme || "Backend-selected";
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -52,6 +59,12 @@ export class HuiShoppingListEditor extends LitElement
           .configValue="${"title"}"
           @value-changed="${this._valueChanged}"
         ></paper-input>
+        <hui-theme-select-editor
+          .hass="${this.hass}"
+          .value="${this._theme}"
+          .configValue="${"theme"}"
+          @theme-changed="${this._valueChanged}"
+        ></hui-theme-select-editor>
       </div>
     `;
   }

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -7,6 +7,7 @@ import {
 } from "lit-element";
 
 import "../../../../components/entity/ha-entity-picker";
+import "../../components/hui-theme-select-editor";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
@@ -20,6 +21,7 @@ const cardConfigStruct = struct({
   type: "string",
   entity: "string?",
   name: "string?",
+  theme: "string?",
 });
 
 @customElement("hui-weather-forecast-card-editor")
@@ -42,6 +44,10 @@ export class HuiWeatherForecastCardEditor extends LitElement
     return this._config!.name || "";
   }
 
+  get _theme(): string {
+    return this._config!.theme || "Backend-selected";
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -73,6 +79,12 @@ export class HuiWeatherForecastCardEditor extends LitElement
           .configValue="${"name"}"
           @value-changed="${this._valueChanged}"
         ></paper-input>
+        <hui-theme-select-editor
+          .hass="${this.hass}"
+          .value="${this._theme}"
+          .configValue="${"theme"}"
+          @theme-changed="${this._valueChanged}"
+        ></hui-theme-select-editor>
       </div>
     `;
   }

src/panels/lovelace/views/hui-panel-view.ts

@@ -5,7 +5,7 @@ import {
   UpdatingElement,
 } from "lit-element";
 
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard } from "../types";

src/panels/lovelace/views/hui-view.ts

@@ -9,7 +9,7 @@ import {
 import "../../../components/entity/ha-state-label-badge";
 // This one is for types
 
-import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 
 import {
   LovelaceViewConfig,

src/state/themes-mixin.ts

@@ -1,4 +1,4 @@
-import applyThemesOnElement from "../common/dom/apply_themes_on_element";
+import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { storeState } from "../util/ha-pref-storage";
 import { subscribeThemes } from "../data/ws-themes";
 import { HassBaseEl } from "./hass-base-mixin";