Adding Theme option to Glance and Button Cards (#1783)

* Adding Theme option to Glance and Button Cards

* Updateing Theme default to `default`

* Prettier Update

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

@@ -1,4 +1,4 @@
-import { html, LitElement } from "@polymer/lit-element";
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 import { fireEvent } from "../../../common/dom/fire_event.js";
 
 import "../../../components/ha-card.js";
@@ -8,6 +8,7 @@ import isValidEntityId from "../../../common/entity/valid_entity_id.js";
 import stateIcon from "../../../common/entity/state_icon.js";
 import computeStateDomain from "../../../common/entity/compute_state_domain.js";
 import computeStateName from "../../../common/entity/compute_state_name.js";
+import applyThemesOnElement from "../../../common/dom/apply_themes_on_element.js";
 import { styleMap } from "lit-html/directives/styleMap.js";
 import { HomeAssistant } from "../../../types.js";
 import { HassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
@@ -17,17 +18,18 @@ interface Config extends LovelaceConfig {
   entity: string;
   name?: string;
   icon?: string;
+  theme?: string;
   tap_action?: "toggle" | "call-service" | "more-info";
   service?: string;
   service_data?: object;
 }
 
-export class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
+class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   protected hass?: HomeAssistant;
   protected config?: Config;
 
-  static get properties() {
+  static get properties(): PropertyDeclarations {
     return {
       hass: {},
       config: {},
@@ -43,7 +45,7 @@ export class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
       throw new Error("Invalid Entity");
     }
 
-    this.config = config;
+    this.config = { theme: "default", ...config };
 
     if (this.hass) {
       this.requestUpdate();
@@ -56,6 +58,8 @@ export class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
     }
     const stateObj = this.hass!.states[this.config.entity];
 
+    applyThemesOnElement(this, this.hass!.themes, this.config.theme);
+
     return html`
       ${this.renderStyle()}
       <ha-card @click="${this.handleClick}">

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

@@ -5,6 +5,7 @@ import { repeat } from "lit-html/directives/repeat";
 import computeStateDisplay from "../../../common/entity/compute_state_display.js";
 import computeStateName from "../../../common/entity/compute_state_name.js";
 import processConfigEntities from "../common/process-config-entities";
+import applyThemesOnElement from "../../../common/dom/apply_themes_on_element.js";
 
 import toggleEntity from "../common/entity/toggle-entity.js";
 
@@ -31,7 +32,7 @@ interface Config extends LovelaceConfig {
   show_state?: boolean;
   title?: string;
   column_width?: string;
-  theming?: "primary";
+  theme?: string;
   entities: EntityConfig[];
 }
 
@@ -53,7 +54,7 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
   }
 
   public setConfig(config: Config) {
-    this.config = config;
+    this.config = { theme: "default", ...config };
     const entities = processConfigEntities(config.entities);
 
     for (const entity of entities) {
@@ -69,13 +70,6 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
       config.column_width || "20%"
     );
 
-    if (config.theming) {
-      if (typeof config.theming !== "string") {
-        throw new Error("Incorrect theming config.");
-      }
-      this.classList.add(`theme-${config.theming}`);
-    }
-
     this.configEntities = entities;
 
     if (this.hass) {
@@ -93,6 +87,8 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
       (conf) => conf.entity in states
     );
 
+    applyThemesOnElement(this, this.hass!.themes, this.config.theme);
+
     return html`
       ${this.renderStyle()}
       <ha-card .header="${title}">
@@ -110,11 +106,6 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
   private renderStyle() {
     return html`
       <style>
-        :host(.theme-primary) {
-          --paper-card-background-color:var(--primary-color);
-          --paper-item-icon-color:var(--text-primary-color);
-          color:var(--text-primary-color);
-        }
         .entities {
           display: flex;
           padding: 0 16px 4px;