diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts index 0c9e64e7ce..8555391b88 100644 --- a/src/state/themes-mixin.ts +++ b/src/state/themes-mixin.ts @@ -22,6 +22,8 @@ const mql = matchMedia("(prefers-color-scheme: dark)"); export default >(superClass: T) => class extends superClass { + private _themeApplied = false; + protected firstUpdated(changedProps) { super.firstUpdated(changedProps); this.addEventListener("settheme", (ev) => { @@ -32,7 +34,7 @@ export default >(superClass: T) => storeState(this.hass!); }); mql.addListener((ev) => this._applyTheme(ev.matches)); - if (mql.matches) { + if (!this._themeApplied && mql.matches) { applyThemesOnElement( document.documentElement, { @@ -51,6 +53,7 @@ export default >(superClass: T) => super.hassConnected(); subscribeThemes(this.hass!.connection, (themes) => { + this._themeApplied = true; this._updateHass({ themes }); invalidateThemeCache(); this._applyTheme(mql.matches);