Translate theme settings (#16053)

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -93,7 +93,6 @@ export class HuiViewEditor extends LitElement {
     const schema = this._schema(this.hass.localize);
 
     const data = {
-      theme: "Backend-selected",
       ...this._config,
       type: this._type,
     };

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

@@ -37,6 +37,7 @@ class HaPickDashboardRow extends LitElement {
               .disabled=${!this._dashboards?.length}
               .value=${this.hass.defaultPanel}
               @selected=${this._dashboardChanged}
+              naturalMenuWidth
             >
               <mwc-list-item value="lovelace">
                 ${this.hass.localize(

src/panels/profile/ha-pick-first-weekday-row.ts

@@ -30,6 +30,7 @@ class FirstWeekdayRow extends LitElement {
           .disabled=${this.hass.locale === undefined}
           .value=${this.hass.locale.first_weekday}
           @selected=${this._handleFormatSelection}
+          naturalMenuWidth
         >
           ${[
             FirstWeekday.language,

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

@@ -39,6 +39,7 @@ export class HaPickLanguageRow extends LitElement {
           )}
           .value=${this.hass.locale.language}
           @selected=${this._languageSelectionChanged}
+          naturalMenuWidth
         >
           ${this._languages.map(
             (language) => html`<mwc-list-item

src/panels/profile/ha-pick-number-format-row.ts

@@ -31,6 +31,7 @@ class NumberFormatRow extends LitElement {
           .disabled=${this.hass.locale === undefined}
           .value=${this.hass.locale.number_format}
           @selected=${this._handleFormatSelection}
+          naturalMenuWidth
         >
           ${Object.values(NumberFormat).map((format) => {
             const formattedNumber = formatNumber(1234567.89, {

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

@@ -23,6 +23,9 @@ import {
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 
+const BACKEND_SELECTED_THEME = "Backend-selected";
+const DEFAULT_THEME = "default";
+
 @customElement("ha-pick-theme-row")
 export class HaPickThemeRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -65,16 +68,24 @@ export class HaPickThemeRow extends LitElement {
         <ha-select
           .label=${this.hass.localize("ui.panel.profile.themes.dropdown_label")}
           .disabled=${!hasThemes}
-          .value=${this.hass.selectedTheme?.theme || "Backend-selected"}
+          .value=${this.hass.selectedTheme?.theme || BACKEND_SELECTED_THEME}
           @selected=${this._handleThemeSelection}
+          naturalMenuWidth
         >
+          <mwc-list-item .value=${BACKEND_SELECTED_THEME}>
+            ${this.hass.localize("ui.panel.profile.themes.backend-selected")}
+          </mwc-list-item>
+          <mwc-list-item .value=${DEFAULT_THEME}>
+            ${this.hass.localize("ui.panel.profile.themes.default")}
+          </mwc-list-item>
           ${this._themeNames.map(
-            (theme) =>
-              html`<mwc-list-item .value=${theme}>${theme}</mwc-list-item>`
+            (theme) => html`
+              <mwc-list-item .value=${theme}>${theme}</mwc-list-item>
+            `
           )}
         </ha-select>
       </ha-settings-row>
-      ${curTheme === "default" || this._supportsModeSelection(curTheme)
+      ${curTheme === DEFAULT_THEME || this._supportsModeSelection(curTheme)
         ? html` <div class="inputs">
             <ha-formfield
               .label=${this.hass.localize(
@@ -114,7 +125,7 @@ export class HaPickThemeRow extends LitElement {
               >
               </ha-radio>
             </ha-formfield>
-            ${curTheme === "default"
+            ${curTheme === DEFAULT_THEME
               ? html`<div class="color-pickers">
                   <ha-textfield
                     .value=${themeSettings?.primaryColor ||
@@ -154,9 +165,7 @@ export class HaPickThemeRow extends LitElement {
       (!oldHass || oldHass.themes.themes !== this.hass.themes.themes);
 
     if (themesChanged) {
-      this._themeNames = ["Backend-selected", "default"].concat(
-        Object.keys(this.hass.themes.themes).sort()
-      );
+      this._themeNames = Object.keys(this.hass.themes.themes).sort();
     }
   }
 
@@ -198,7 +207,7 @@ export class HaPickThemeRow extends LitElement {
       return;
     }
 
-    if (theme === "Backend-selected") {
+    if (theme === BACKEND_SELECTED_THEME) {
       if (this.hass.selectedTheme?.theme) {
         fireEvent(this, "settheme", {
           theme: "",

src/panels/profile/ha-pick-time-format-row.ts

@@ -32,6 +32,7 @@ class TimeFormatRow extends LitElement {
           .disabled=${this.hass.locale === undefined}
           .value=${this.hass.locale.time_format}
           @selected=${this._handleFormatSelection}
+          naturalMenuWidth
         >
           ${Object.values(TimeFormat).map((format) => {
             const formattedTime = formatTime(date, {

src/translations/en.json

@@ -4711,7 +4711,9 @@
           },
           "primary_color": "Primary color",
           "accent_color": "Accent color",
-          "reset": "Reset"
+          "reset": "Reset",
+          "backend-selected": "Use backend preferred theme",
+          "default": "Default"
         },
         "dashboard": {
           "header": "Dashboard",