From 1904c4d05765925f286a7a17ee666b226ab49226 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 29 Apr 2021 21:04:31 +0200
Subject: [PATCH] Fix race in theme setting (#9027)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
---
 src/state/themes-mixin.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 <T extends Constructor<HassBaseEl>>(superClass: T) =>
   class extends superClass {
+    private _themeApplied = false;
+
     protected firstUpdated(changedProps) {
       super.firstUpdated(changedProps);
       this.addEventListener("settheme", (ev) => {
@@ -32,7 +34,7 @@ export default <T extends Constructor<HassBaseEl>>(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 <T extends Constructor<HassBaseEl>>(superClass: T) =>
       super.hassConnected();
 
       subscribeThemes(this.hass!.connection, (themes) => {
+        this._themeApplied = true;
         this._updateHass({ themes });
         invalidateThemeCache();
         this._applyTheme(mql.matches);