Fix theme setting (#11977)

gallery/src/components/demo-cards.ts

@@ -78,6 +78,9 @@ class DemoCards extends LitElement {
     ha-formfield {
       margin-right: 16px;
     }
+    #container {
+      background-color: var(--primary-background-color);
+    }
   `;
 }
 

hassio/src/hassio-main.ts

@@ -121,7 +121,8 @@ export class HassioMain extends SupervisorBaseElement {
       this.parentElement,
       this.hass.themes,
       themeName,
-      themeSettings
+      themeSettings,
+      true
     );
   }
 }

src/auth/ha-authorize.ts

@@ -101,13 +101,19 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     this._fetchAuthProviders();
 
     if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      applyThemesOnElement(document.documentElement, {
-        default_theme: "default",
-        default_dark_theme: null,
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      });
+      applyThemesOnElement(
+        document.documentElement,
+        {
+          default_theme: "default",
+          default_dark_theme: null,
+          themes: {},
+          darkMode: true,
+          theme: "default",
+        },
+        undefined,
+        undefined,
+        true
+      );
     }
 
     if (!this.redirectUri) {

src/common/dom/apply_themes_on_element.ts

@@ -31,11 +31,12 @@ export const applyThemesOnElement = (
   element,
   themes: HomeAssistant["themes"],
   selectedTheme?: string,
-  themeSettings?: Partial<HomeAssistant["selectedTheme"]>
+  themeSettings?: Partial<HomeAssistant["selectedTheme"]>,
+  main?: boolean
 ) => {
-  // If there is no explicitly desired theme provided, we automatically
+  // If there is no explicitly desired theme provided, and the element is the main element we automatically
   // use the active one from `themes`.
-  const themeToApply = selectedTheme || themes.theme;
+  const themeToApply = selectedTheme || (main ? themes.theme : undefined);
 
   // If there is no explicitly desired dark mode provided, we automatically
   // use the active one from `themes`.
@@ -47,7 +48,7 @@ export const applyThemesOnElement = (
   let cacheKey = themeToApply;
   let themeRules: Partial<ThemeVars> = {};
 
-  if (darkMode) {
+  if (themeToApply && darkMode) {
     cacheKey = `${cacheKey}__dark`;
     themeRules = { ...darkStyles };
   }

src/fake_data/provide_hass.ts

@@ -300,7 +300,9 @@ export const provideHass = (
       applyThemesOnElement(
         document.documentElement,
         themes,
-        selectedTheme!.theme
+        selectedTheme!.theme,
+        undefined,
+        true
       );
     },
 

src/layouts/supervisor-error-screen.ts

@@ -101,7 +101,8 @@ class SupervisorErrorScreen extends LitElement {
       this.parentElement,
       this.hass.themes,
       themeName,
-      themeSettings
+      themeSettings,
+      true
     );
   }
 

src/onboarding/ha-onboarding.ts

@@ -133,13 +133,19 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       import("./particles");
     }
     if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      applyThemesOnElement(document.documentElement, {
-        default_theme: "default",
-        default_dark_theme: null,
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      });
+      applyThemesOnElement(
+        document.documentElement,
+        {
+          default_theme: "default",
+          default_dark_theme: null,
+          themes: {},
+          darkMode: true,
+          theme: "default",
+        },
+        undefined,
+        undefined,
+        true
+      );
     }
   }
 

src/state/themes-mixin.ts

@@ -38,13 +38,19 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       });
       mql.addListener((ev) => this._applyTheme(ev.matches));
       if (!this._themeApplied && mql.matches) {
-        applyThemesOnElement(document.documentElement, {
-          default_theme: "default",
-          default_dark_theme: null,
-          themes: {},
-          darkMode: true,
-          theme: "default",
-        });
+        applyThemesOnElement(
+          document.documentElement,
+          {
+            default_theme: "default",
+            default_dark_theme: null,
+            themes: {},
+            darkMode: true,
+            theme: "default",
+          },
+          undefined,
+          undefined,
+          true
+        );
       }
     }
 
@@ -93,7 +99,8 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         document.documentElement,
         this.hass.themes,
         themeName,
-        themeSettings
+        themeSettings,
+        true
       );
 
       if (darkMode !== this.hass.themes.darkMode) {