Fix pick-theme-row and behavior of default theme mode (#20783)

home-assistant · May 24, 2024 · 3c3d542 · 3c3d542
1 parent afc624b
commit 3c3d542
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts
@@ -37,6 +37,8 @@ export class HaPickThemeRow extends LitElement {
   protected render(): TemplateResult {
     const hasThemes =
       this.hass.themes.themes && Object.keys(this.hass.themes.themes).length;
+
+    const curThemeIsUseDefault = this.hass.selectedTheme?.theme === "";
     const curTheme = this.hass.selectedTheme?.theme
       ? this.hass.selectedTheme?.theme
       : this.hass.themes.darkMode
@@ -86,6 +88,9 @@ export class HaPickThemeRow extends LitElement {
         </ha-select>
       </ha-settings-row>
       ${curTheme === HOME_ASSISTANT_THEME ||
+      (curThemeIsUseDefault &&
+        this.hass.themes.default_dark_theme &&
+        this.hass.themes.default_theme) ||
       this._supportsModeSelection(curTheme)
         ? html` <div class="inputs">
             <ha-formfield

diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts
@@ -84,15 +84,15 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
             }
           : this.hass.selectedTheme;
 
+      let darkMode =
+        themeSettings?.dark === undefined ? darkPreferred : themeSettings.dark;
+
       const themeName =
         themeSettings?.theme ||
-        (darkPreferred && this.hass.themes.default_dark_theme
+        (darkMode && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme
           : this.hass.themes.default_theme);
 
-      let darkMode =
-        themeSettings?.dark === undefined ? darkPreferred : themeSettings.dark;
-
       const selectedTheme = themeName
         ? this.hass.themes.themes[themeName]
         : undefined;