Add 'Default' option to theme-picker (#16915)

src/components/ha-selector/ha-selector-theme.ts

@@ -24,6 +24,7 @@ export class HaThemeSelector extends LitElement {
         .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
+        .includeDefault=${this.selector.theme?.include_default}
         .disabled=${this.disabled}
         .required=${this.required}
       ></ha-theme-picker>

src/components/ha-theme-picker.ts

@@ -1,17 +1,28 @@
 import "@material/mwc-list/mwc-list-item";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  nothing,
+  LitElement,
+  TemplateResult,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { HomeAssistant } from "../types";
 import "./ha-select";
 
+const DEFAULT_THEME = "default";
+
 @customElement("ha-theme-picker")
 export class HaThemePicker extends LitElement {
   @property() public value?: string;
 
   @property() public label?: string;
 
+  @property() includeDefault?: boolean = false;
+
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
@@ -36,6 +47,13 @@ export class HaThemePicker extends LitElement {
             "ui.components.theme-picker.no_theme"
           )}</mwc-list-item
         >
+        ${this.includeDefault
+          ? html`<mwc-list-item .value=${DEFAULT_THEME}
+              >${this.hass!.localize(
+                "ui.components.theme-picker.default"
+              )}</mwc-list-item
+            >`
+          : nothing}
         ${Object.keys(this.hass!.themes.themes)
           .sort()
           .map(

src/data/selector.ts

@@ -345,8 +345,7 @@ export interface TemplateSelector {
 }
 
 export interface ThemeSelector {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  theme: {} | null;
+  theme: { include_default?: boolean } | null;
 }
 export interface TimeSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types

src/translations/en.json

@@ -396,7 +396,8 @@
       },
       "theme-picker": {
         "theme": "Theme",
-        "no_theme": "No theme"
+        "no_theme": "No theme",
+        "default": "[%key:ui::panel::profile::themes::default%]"
       },
       "language-picker": {
         "language": "Language",