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;