Fix default themes (#9290)

* Fix default themes

* Simplify pick theme row

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -244,9 +244,6 @@ class HassioRegistriesDialog extends LitElement {
         mwc-list-item span[slot="secondary"] {
           color: var(--secondary-text-color);
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -150,9 +150,6 @@ class HassioRepositoriesDialog extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
         ha-circular-progress {
           display: block;
           margin: 32px;

src/components/device/ha-device-action-picker.ts

@@ -4,7 +4,6 @@ import {
   fetchDeviceActions,
   localizeDeviceAutomationAction,
 } from "../../data/device_automation";
-import "../ha-paper-dropdown-menu";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-action-picker")

src/components/device/ha-device-condition-picker.ts

@@ -4,7 +4,6 @@ import {
   fetchDeviceConditions,
   localizeDeviceAutomationCondition,
 } from "../../data/device_automation";
-import "../ha-paper-dropdown-menu";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-condition-picker")

src/components/device/ha-device-trigger-picker.ts

@@ -4,7 +4,6 @@ import {
   fetchDeviceTriggers,
   localizeDeviceAutomationTrigger,
 } from "../../data/device_automation";
-import "../ha-paper-dropdown-menu";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-trigger-picker")

src/components/media-player/ha-media-player-browse.ts

@@ -45,7 +45,6 @@ import "../ha-button-menu";
 import "../ha-card";
 import "../ha-circular-progress";
 import "../ha-fab";
-import "../ha-paper-dropdown-menu";
 import "../ha-svg-icon";
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts

@@ -6,7 +6,7 @@ import { TagTrigger } from "../../../../../data/automation";
 import { fetchTags, Tag } from "../../../../../data/tag";
 import { HomeAssistant } from "../../../../../types";
 import { TriggerElement } from "../ha-automation-trigger-row";
-
+import "../../../../../components/ha-paper-dropdown-menu";
 @customElement("ha-automation-trigger-tag")
 export class HaTagTrigger extends LitElement implements TriggerElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -193,9 +193,6 @@ class HaInputNumberForm extends LitElement {
         .form {
           color: var(--primary-text-color);
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -196,9 +196,6 @@ class HaInputSelectForm extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -179,9 +179,6 @@ class HaInputTextForm extends LitElement {
         .row {
           padding: 16px 0;
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts

@@ -5,7 +5,6 @@ import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-paper-dropdown-menu";
 import "../../../../components/ha-svg-icon";
 import type { LovelaceConfig } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";

src/panels/profile/ha-pick-theme-row.ts

@@ -17,7 +17,6 @@ import "../../components/ha-paper-dropdown-menu";
 import "../../components/ha-radio";
 import type { HaRadio } from "../../components/ha-radio";
 import "../../components/ha-settings-row";
-import { Theme } from "../../data/ws-themes";
 import {
   DEFAULT_PRIMARY_COLOR,
   DEFAULT_ACCENT_COLOR,
@@ -33,10 +32,6 @@ export class HaPickThemeRow extends LitElement {
 
   @state() _themeNames: string[] = [];
 
-  @state() _selectedThemeIndex = 0;
-
-  @state() _selectedTheme?: Theme;
-
   protected render(): TemplateResult {
     const hasThemes =
       this.hass.themes.themes && Object.keys(this.hass.themes.themes).length;
@@ -72,7 +67,8 @@ export class HaPickThemeRow extends LitElement {
         >
           <paper-listbox
             slot="dropdown-content"
-            .selected=${this._selectedThemeIndex}
+            .selected=${this.hass.selectedTheme?.theme || "Backend-selected"}
+            attr-for-selected="theme"
             @iron-select=${this._handleThemeSelection}
           >
             ${this._themeNames.map(
@@ -81,8 +77,7 @@ export class HaPickThemeRow extends LitElement {
           </paper-listbox>
         </ha-paper-dropdown-menu>
       </ha-settings-row>
-      ${curTheme === "default" ||
+      ${curTheme === "default" || this._supportsModeSelection(curTheme)
-      (this._selectedTheme && this._supportsModeSelection(this._selectedTheme))
         ? html` <div class="inputs">
             <ha-formfield
               .label=${this.hass.localize(
@@ -155,36 +150,17 @@ export class HaPickThemeRow extends LitElement {
     `;
   }
 
-  protected updated(changedProperties: PropertyValues) {
+  public willUpdate(changedProperties: PropertyValues) {
     const oldHass = changedProperties.get("hass") as undefined | HomeAssistant;
     const themesChanged =
       changedProperties.has("hass") &&
       (!oldHass || oldHass.themes.themes !== this.hass.themes.themes);
-    const selectedThemeChanged =
-      changedProperties.has("hass") &&
-      (!oldHass || oldHass.selectedTheme !== this.hass.selectedTheme);
 
     if (themesChanged) {
       this._themeNames = ["Backend-selected", "default"].concat(
         Object.keys(this.hass.themes.themes).sort()
       );
     }
-
-    if (selectedThemeChanged) {
-      if (
-        this.hass.selectedTheme &&
-        this._themeNames.indexOf(this.hass.selectedTheme.theme) > 0
-      ) {
-        this._selectedThemeIndex = this._themeNames.indexOf(
-          this.hass.selectedTheme.theme
-        );
-        this._selectedTheme = this.hass.themes.themes[
-          this.hass.selectedTheme.theme
-        ];
-      } else if (!this.hass.selectedTheme) {
-        this._selectedThemeIndex = 0;
-      }
-    }
   }
 
   private _handleColorChange(ev: CustomEvent) {
@@ -199,8 +175,8 @@ export class HaPickThemeRow extends LitElement {
     });
   }
 
-  private _supportsModeSelection(theme: Theme): boolean {
+  private _supportsModeSelection(themeName: string): boolean {
-    return theme.modes?.light !== undefined && theme.modes?.dark !== undefined;
+    return "modes" in this.hass.themes.themes[themeName];
   }
 
   private _handleDarkMode(ev: CustomEvent) {

src/state/themes-mixin.ts

@@ -74,16 +74,15 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       const themeName =
         themeSettings?.theme ||
         (darkPreferred && this.hass.themes.default_dark_theme
-          ? 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 =
+      const selectedTheme = themeName
-        themeSettings?.theme !== undefined
+        ? this.hass.themes.themes[themeName]
-          ? this.hass.themes.themes[themeSettings.theme]
+        : undefined;
-          : undefined;
 
       if (selectedTheme && darkMode && !selectedTheme.modes) {
         darkMode = false;