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

@@ -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 {

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);
   }