diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts index da8a83506c..a6fd07b5b3 100644 --- a/src/common/dom/apply_themes_on_element.ts +++ b/src/common/dom/apply_themes_on_element.ts @@ -41,9 +41,7 @@ export const applyThemesOnElement = ( // If there is no explicitly desired dark mode provided, we automatically // use the active one from `themes`. const darkMode = - themeSettings && themeSettings?.dark !== undefined - ? themeSettings?.dark - : themes.darkMode; + themeSettings?.dark !== undefined ? themeSettings.dark : themes.darkMode; let cacheKey = themeToApply; let themeRules: Partial = {}; @@ -135,10 +133,19 @@ export const applyThemesOnElement = ( // Set and/or reset styles if (element.updateStyles) { + // Use updateStyles() method of Polymer elements element.updateStyles(styles); } else if (window.ShadyCSS) { - // Implement updateStyles() method of Polymer elements + // Use ShadyCSS if available window.ShadyCSS.styleSubtree(/** @type {!HTMLElement} */ element, styles); + } else { + for (const s in styles) { + if (s === null) { + element.style.removeProperty(s); + } else { + element.style.setProperty(s, styles[s]); + } + } } }; diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts index d56443be0f..9869f51156 100644 --- a/src/state/themes-mixin.ts +++ b/src/state/themes-mixin.ts @@ -71,7 +71,7 @@ export default >(superClass: T) => } let themeSettings: Partial = - this.hass!.selectedTheme; + this.hass.selectedTheme; const themeName = themeSettings?.theme || @@ -80,7 +80,7 @@ export default >(superClass: T) => : this.hass.themes.default_theme); let darkMode = - themeSettings?.dark === undefined ? darkPreferred : themeSettings?.dark; + themeSettings?.dark === undefined ? darkPreferred : themeSettings.dark; const selectedTheme = themeName ? this.hass.themes.themes[themeName]