From ce11301516749e6522d9acad3daffb9bd2dc68cb Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 20 Oct 2023 20:44:53 +0200
Subject: [PATCH] Fix initial theming (#18296)

---
 src/common/dom/apply_themes_on_element.ts | 15 +++++++++++----
 src/state/themes-mixin.ts                 |  4 ++--
 2 files changed, 13 insertions(+), 6 deletions(-)

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<ThemeVars> = {};
@@ -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 <T extends Constructor<HassBaseEl>>(superClass: T) =>
       }
 
       let themeSettings: Partial<HomeAssistant["selectedTheme"]> =
-        this.hass!.selectedTheme;
+        this.hass.selectedTheme;
 
       const themeName =
         themeSettings?.theme ||
@@ -80,7 +80,7 @@ export default <T extends Constructor<HassBaseEl>>(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]