From 3c3d54243cb89faa494fd6d723e5645ec78ea90c Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Fri, 24 May 2024 07:06:22 -0700
Subject: [PATCH] Fix pick-theme-row and behavior of default theme mode
 (#20783)

---
 src/panels/profile/ha-pick-theme-row.ts | 5 +++++
 src/state/themes-mixin.ts               | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts
index 5f955a16dd01..bdbd1e8292a2 100644
--- 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
index 4dfb775d7742..d9039a848b14 100644
--- 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;