From 362e758c4061eb5cab0e7dbf3604c259d6984027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Fri, 5 Oct 2018 10:26:31 +0200
Subject: [PATCH] Lovelace: Allow glance card to assume theme colors (#1732)

* Allow glance card to assume theme colors

* Better configuration options

* Added example to gallery

* Fixing problems from review
---
 gallery/src/demos/demo-hui-glance-card.js    | 15 +++++++++++++++
 src/panels/lovelace/cards/hui-glance-card.js | 13 +++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/gallery/src/demos/demo-hui-glance-card.js b/gallery/src/demos/demo-hui-glance-card.js
index 5265c51802..d80319b762 100644
--- a/gallery/src/demos/demo-hui-glance-card.js
+++ b/gallery/src/demos/demo-hui-glance-card.js
@@ -142,6 +142,21 @@ const CONFIGS = [
     - light.kitchen_lights
     `
   },
+  {
+    heading: 'Primary theme',
+    config: `
+- type: glance
+  theming: primary
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `
+  },
 ];
 
 class DemoPicEntity extends PolymerElement {
diff --git a/src/panels/lovelace/cards/hui-glance-card.js b/src/panels/lovelace/cards/hui-glance-card.js
index ce86d15bb0..326bb1ddc5 100644
--- a/src/panels/lovelace/cards/hui-glance-card.js
+++ b/src/panels/lovelace/cards/hui-glance-card.js
@@ -22,6 +22,11 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     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;
@@ -90,6 +95,14 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   setConfig(config) {
     this._config = config;
     this.updateStyles({ '--glance-column-width': (config && config.column_width) || '20%' });
+
+    if (config && config.theming) {
+      if (typeof (config.theming) !== 'string') {
+        throw new Error('Incorrect theming config.');
+      }
+      this.classList.add(`theme-${config.theming}`);
+    }
+
     this._configEntities = processConfigEntities(config.entities);
   }