Set theme variables on html element (#1023)

* set theme on html element

* style toggle buttons with primary color

* Fix lint

src/home-assistant.html

@@ -244,11 +244,21 @@ class HomeAssistant extends Polymer.Element {
 
     this.hass.callApi('get', 'themes').then((themes) => {
       this._updateHass({ themes: themes });
-      window.hassUtil.applyThemesOnElement(this, themes, this.hass.selectedTheme, true);
+      window.hassUtil.applyThemesOnElement(
+        document.documentElement,
+        themes,
+        this.hass.selectedTheme,
+        true
+      );
     });
     conn.subscribeEvents((event) => {
       this._updateHass({ themes: event.data });
-      window.hassUtil.applyThemesOnElement(this, event.data, this.hass.selectedTheme, true);
+      window.hassUtil.applyThemesOnElement(
+        document.documentElement,
+        event.data,
+        this.hass.selectedTheme,
+        true
+      );
     }, 'themes_updated').then(function (unsub) {
       unsubThemes = unsub;
     });
@@ -314,7 +324,12 @@ class HomeAssistant extends Polymer.Element {
 
   setTheme(event) {
     this._updateHass({ selectedTheme: event.detail });
-    window.hassUtil.applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
+    window.hassUtil.applyThemesOnElement(
+      document.documentElement,
+      this.hass.themes,
+      this.hass.selectedTheme,
+      true
+    );
     this.$.storage.storeState();
   }
 

src/resources/ha-style.html

@@ -36,9 +36,9 @@
     --table-row-background-color: transparent;
     --table-row-alternative-background-color: #eee;
 
-    --paper-toggle-button-checked-ink-color: #039be5;
-    --paper-toggle-button-checked-button-color: #039be5;
-    --paper-toggle-button-checked-bar-color: #039be5;
+    --paper-toggle-button-checked-ink-color: var(--primary-color);
+    --paper-toggle-button-checked-button-color: var(--primary-color);
+    --paper-toggle-button-checked-bar-color: var(--primary-color);
 
     --paper-slider-knob-color: var(--primary-color);
     --paper-slider-knob-start-color: var(--primary-color);

src/util/hass-util.html

@@ -365,7 +365,10 @@ window.hassUtil.applyThemesOnElement = function (element, themes, localTheme, up
       styles[prefixedKey] = theme[key];
     });
   }
-  element.updateStyles(styles);
+  // implement updateStyles() method of Polemer elements
+  if (window.ShadyCSS) {
+    window.ShadyCSS.styleSubtree(/** @type {!HTMLElement} */(element), styles);
+  }
 
   if (!updateMeta) return;