diff --git a/src/home-assistant.html b/src/home-assistant.html
index 546bc925e6..1f1789a592 100644
--- a/src/home-assistant.html
+++ b/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();
}
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index 12f441b3b0..b6b15bb120 100644
--- a/src/resources/ha-style.html
+++ b/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);
diff --git a/src/util/hass-util.html b/src/util/hass-util.html
index 77d8dc4891..dd02207797 100644
--- a/src/util/hass-util.html
+++ b/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;