diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts
index 5f955a16dd..bdbd1e8292 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 4dfb775d77..d9039a848b 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;
 
-      const themeName =
-        themeSettings?.theme ||
-        (darkPreferred && 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 themeName =
+        themeSettings?.theme ||
+        (darkMode && this.hass.themes.default_dark_theme
+          ? this.hass.themes.default_dark_theme
+          : this.hass.themes.default_theme);
+
       const selectedTheme = themeName
         ? this.hass.themes.themes[themeName]
         : undefined;