Show users theme even if browser theme is active

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

@@ -1,11 +1,14 @@
-import "@material/mwc-button/mwc-button";
-import "@material/mwc-list/mwc-list-item";
+import { mdiAlertCircleOutline } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-formfield";
 import "../../components/ha-radio";
+import "../../components/ha-button";
+import "../../components/ha-circular-progress";
+import "../../components/ha-svg-icon";
+import "../../components/ha-list-item";
 import type { HaRadio } from "../../components/ha-radio";
 import "../../components/ha-select";
 import "../../components/ha-settings-row";
@@ -14,9 +17,10 @@ import {
   DEFAULT_ACCENT_COLOR,
   DEFAULT_PRIMARY_COLOR,
 } from "../../resources/styles-data";
-import type { HomeAssistant } from "../../types";
+import type { HomeAssistant, ThemeSettings } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import type { StorageLocation } from "../../state/themes-mixin";
+import { subscribeSelectedTheme } from "../../data/ws-themes";
 
 const USE_DEFAULT_THEME = "__USE_DEFAULT_THEME__";
 const HOME_ASSISTANT_THEME = "default";
@@ -32,55 +36,73 @@ export class HaPickThemeRow extends LitElement {
 
   @state() _themeNames: string[] = [];
 
+  @state() private _selectedTheme?: ThemeSettings;
+
+  @state() private _loading = false;
+
   protected render(): TemplateResult {
+    if (this._loading) {
+      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
+    }
+
     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
+    const curThemeIsUseDefault = this._selectedTheme?.theme === "";
+    const curTheme = this._selectedTheme?.theme
+      ? this._selectedTheme?.theme
+      : this._selectedTheme?.dark
         ? this.hass.themes.default_dark_theme || this.hass.themes.default_theme
         : this.hass.themes.default_theme;
 
-    const themeSettings = this.hass.selectedTheme;
-
     return html`
       <ha-settings-row .narrow=${this.narrow}>
         <span slot="heading"
           >${this.hass.localize("ui.panel.profile.themes.header")}</span
         >
-        <span slot="description">
-          ${!hasThemes
+        <span
+          slot="description"
+          class=${this.storageLocation === "user" &&
+          this.hass.browserThemeEnabled
+            ? "device-info"
+            : ""}
+        >
+          ${!hasThemes &&
+          !(this.storageLocation === "user" && this.hass.browserThemeEnabled)
             ? this.hass.localize("ui.panel.profile.themes.error_no_theme")
             : ""}
-          <a
-            href=${documentationUrl(
-              this.hass,
-              "/integrations/frontend/#defining-themes"
-            )}
-            target="_blank"
-            rel="noreferrer"
-          >
-            ${this.hass.localize("ui.panel.profile.themes.link_promo")}
-          </a>
+          ${this.storageLocation === "user" && this.hass.browserThemeEnabled
+            ? html`<ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
+                ${this.hass.localize(
+                  "ui.panel.profile.themes.device.user_theme_info"
+                )}`
+            : html`<a
+                href=${documentationUrl(
+                  this.hass,
+                  "/integrations/frontend/#defining-themes"
+                )}
+                target="_blank"
+                rel="noreferrer"
+              >
+                ${this.hass.localize("ui.panel.profile.themes.link_promo")}
+              </a>`}
         </span>
         <ha-select
           .label=${this.hass.localize("ui.panel.profile.themes.dropdown_label")}
           .disabled=${!hasThemes}
-          .value=${this.hass.selectedTheme?.theme || USE_DEFAULT_THEME}
+          .value=${this._selectedTheme?.theme || USE_DEFAULT_THEME}
           @selected=${this._handleThemeSelection}
           naturalMenuWidth
         >
-          <mwc-list-item .value=${USE_DEFAULT_THEME}>
+          <ha-list-item .value=${USE_DEFAULT_THEME}>
             ${this.hass.localize("ui.panel.profile.themes.use_default")}
-          </mwc-list-item>
-          <mwc-list-item .value=${HOME_ASSISTANT_THEME}>
+          </ha-list-item>
+          <ha-list-item .value=${HOME_ASSISTANT_THEME}>
             Home Assistant
-          </mwc-list-item>
+          </ha-list-item>
           ${this._themeNames.map(
             (theme) => html`
-              <mwc-list-item .value=${theme}>${theme}</mwc-list-item>
+              <ha-list-item .value=${theme}>${theme}</ha-list-item>
             `
           )}
         </ha-select>
@@ -90,7 +112,7 @@ export class HaPickThemeRow extends LitElement {
         this.hass.themes.default_dark_theme &&
         this.hass.themes.default_theme) ||
       this._supportsModeSelection(curTheme)
-        ? html` <div class="inputs">
+        ? html`<div class="inputs">
             <ha-formfield
               .label=${this.hass.localize(
                 "ui.panel.profile.themes.dark_mode.auto"
@@ -100,7 +122,7 @@ export class HaPickThemeRow extends LitElement {
                 @change=${this._handleDarkMode}
                 name="dark_mode"
                 value="auto"
-                .checked=${themeSettings?.dark === undefined}
+                .checked=${this._selectedTheme?.dark === undefined}
               ></ha-radio>
             </ha-formfield>
             <ha-formfield
@@ -112,7 +134,7 @@ export class HaPickThemeRow extends LitElement {
                 @change=${this._handleDarkMode}
                 name="dark_mode"
                 value="light"
-                .checked=${themeSettings?.dark === false}
+                .checked=${this._selectedTheme?.dark === false}
               >
               </ha-radio>
             </ha-formfield>
@@ -125,14 +147,14 @@ export class HaPickThemeRow extends LitElement {
                 @change=${this._handleDarkMode}
                 name="dark_mode"
                 value="dark"
-                .checked=${themeSettings?.dark === true}
+                .checked=${this._selectedTheme?.dark === true}
               >
               </ha-radio>
             </ha-formfield>
             ${curTheme === HOME_ASSISTANT_THEME
               ? html`<div class="color-pickers">
                   <ha-textfield
-                    .value=${themeSettings?.primaryColor ||
+                    .value=${this._selectedTheme?.primaryColor ||
                     DEFAULT_PRIMARY_COLOR}
                     type="color"
                     .label=${this.hass.localize(
@@ -142,7 +164,8 @@ export class HaPickThemeRow extends LitElement {
                     @change=${this._handleColorChange}
                   ></ha-textfield>
                   <ha-textfield
-                    .value=${themeSettings?.accentColor || DEFAULT_ACCENT_COLOR}
+                    .value=${this._selectedTheme?.accentColor ||
+                    DEFAULT_ACCENT_COLOR}
                     type="color"
                     .label=${this.hass.localize(
                       "ui.panel.profile.themes.accent_color"
@@ -150,19 +173,36 @@ export class HaPickThemeRow extends LitElement {
                     .name=${"accentColor"}
                     @change=${this._handleColorChange}
                   ></ha-textfield>
-                  ${themeSettings?.primaryColor || themeSettings?.accentColor
-                    ? html` <mwc-button @click=${this._resetColors}>
+                  ${this._selectedTheme?.primaryColor ||
+                  this._selectedTheme?.accentColor
+                    ? html`<ha-button @click=${this._resetColors}>
                         ${this.hass.localize("ui.panel.profile.themes.reset")}
-                      </mwc-button>`
-                    : ""}
+                      </ha-button>`
+                    : nothing}
                 </div>`
-              : ""}
+              : nothing}
           </div>`
-        : ""}
+        : nothing}
     `;
   }
 
   public willUpdate(changedProperties: PropertyValues) {
+    if (!this.hasUpdated) {
+      if (this.storageLocation === "browser") {
+        this._selectedTheme = this.hass.selectedTheme ?? undefined;
+      } else {
+        this._loading = true;
+        this._selectedTheme = undefined;
+        subscribeSelectedTheme(
+          this.hass,
+          (selectedTheme?: ThemeSettings | null) => {
+            this._selectedTheme = selectedTheme ?? undefined;
+            this._loading = false;
+          }
+        );
+      }
+    }
+
     const oldHass = changedProperties.get("hass") as undefined | HomeAssistant;
     const themesChanged =
       changedProperties.has("hass") &&
@@ -173,21 +213,36 @@ export class HaPickThemeRow extends LitElement {
     }
   }
 
-  private _handleColorChange(ev: CustomEvent) {
-    const target = ev.target as any;
+  private _shouldSaveHass() {
+    return (
+      this.storageLocation === "browser" ||
+      (this.storageLocation === "user" && !this.hass.browserThemeEnabled)
+    );
+  }
+
+  private _updateSelectedTheme(updatedTheme: Partial<ThemeSettings>) {
+    this._selectedTheme = {
+      ...this._selectedTheme,
+      ...updatedTheme,
+      theme: updatedTheme.theme ?? this._selectedTheme?.theme ?? "",
+    };
+
     fireEvent(this, "settheme", {
-      settings: { [target.name]: target.value },
+      settings: this._selectedTheme,
       storageLocation: this.storageLocation,
+      saveHass: this._shouldSaveHass(),
     });
   }
 
+  private _handleColorChange(ev: CustomEvent) {
+    const target = ev.target as any;
+    this._updateSelectedTheme({ [target.name]: target.value });
+  }
+
   private _resetColors() {
-    fireEvent(this, "settheme", {
-      settings: {
-        primaryColor: undefined,
-        accentColor: undefined,
-      },
-      storageLocation: this.storageLocation,
+    this._updateSelectedTheme({
+      primaryColor: undefined,
+      accentColor: undefined,
     });
   }
 
@@ -208,38 +263,29 @@ export class HaPickThemeRow extends LitElement {
         dark = true;
         break;
     }
-    fireEvent(this, "settheme", {
-      settings: { dark },
-      storageLocation: this.storageLocation,
-    });
+    this._updateSelectedTheme({ dark });
   }
 
   private _handleThemeSelection(ev) {
     const theme = ev.target.value;
-    if (theme === this.hass.selectedTheme?.theme) {
+    if (theme === this._selectedTheme?.theme) {
       return;
     }
 
     if (theme === USE_DEFAULT_THEME) {
       if (this.hass.selectedTheme?.theme) {
-        fireEvent(this, "settheme", {
-          settings: {
-            theme: "",
-            primaryColor: undefined,
-            accentColor: undefined,
-          },
-          storageLocation: this.storageLocation,
+        this._updateSelectedTheme({
+          theme: "",
+          primaryColor: undefined,
+          accentColor: undefined,
         });
       }
       return;
     }
-    fireEvent(this, "settheme", {
-      settings: {
-        theme,
-        primaryColor: undefined,
-        accentColor: undefined,
-      },
-      storageLocation: this.storageLocation,
+    this._updateSelectedTheme({
+      theme,
+      primaryColor: undefined,
+      accentColor: undefined,
     });
   }
 
@@ -268,6 +314,12 @@ export class HaPickThemeRow extends LitElement {
       flex-grow: 1;
       margin: 0 4px;
     }
+    .device-info {
+      color: var(--warning-color);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
   `;
 }
 

src/panels/profile/ha-profile-section-general.ts

@@ -1,4 +1,3 @@
-import { mdiAlertCircleOutline } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -8,7 +7,6 @@ import "../../components/ha-card";
 import "../../components/ha-button";
 import "../../components/ha-expansion-panel";
 import "../../components/ha-switch";
-import "../../components/ha-svg-icon";
 import "../../layouts/hass-tabs-subpage";
 import { profileSections } from "./ha-panel-profile";
 import { isExternal } from "../../data/external";
@@ -135,26 +133,12 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-first-weekday-row>
-            ${this.hass.browserThemeEnabled || this._browserThemeActivated
-              ? html`
-                  <ha-settings-row .narrow=${this.narrow}>
-                    <span slot="heading">
-                      ${this.hass.localize("ui.panel.profile.themes.header")}
-                    </span>
-                    <span class="theme-warning" slot="description">
-                      <ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
-                      ${this.hass.localize(
-                        "ui.panel.profile.themes.device.user_theme_info"
-                      )}
-                    </span>
-                  </ha-settings-row>
-                `
-              : html`<ha-pick-theme-row
-                  .narrow=${this.narrow}
-                  .hass=${this.hass}
-                  this._browserThemeActivated}
-                  .storageLocation=${"user"}
-                ></ha-pick-theme-row>`}
+            <ha-pick-theme-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+              this._browserThemeActivated}
+              .storageLocation=${"user"}
+            ></ha-pick-theme-row>
             ${this.hass.user!.is_admin
               ? html`
                   <ha-advanced-mode-row
@@ -347,12 +331,6 @@ class HaProfileSectionGeneral extends LitElement {
         ha-expansion-panel {
           margin: 0 8px 8px;
         }
-        .theme-warning {
-          color: var(--warning-color);
-          display: flex;
-          align-items: center;
-          gap: 8px;
-        }
         .device-theme {
           display: block;
           padding-bottom: 16px;

src/state/themes-mixin.ts

@@ -17,8 +17,9 @@ import type { HassBaseEl } from "./hass-base-mixin";
 export type StorageLocation = "user" | "browser";
 
 interface SetThemeSettings {
-  settings: Partial<HomeAssistant["selectedTheme"]>;
+  settings: ThemeSettings;
   storageLocation: StorageLocation;
+  saveHass: boolean;
 }
 
 declare global {
@@ -45,21 +46,21 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
     protected firstUpdated(changedProps) {
       super.firstUpdated(changedProps);
       this.addEventListener("settheme", (ev) => {
-        const selectedTheme = {
-          ...this.hass!.selectedTheme!,
-          ...ev.detail.settings,
-        };
-        this._updateHass({
-          selectedTheme,
-          browserThemeEnabled: ev.detail.storageLocation === "browser",
-        });
-        this._applyTheme(mql.matches);
+        if (ev.detail.saveHass) {
+          this._updateHass({
+            selectedTheme: ev.detail.settings,
+            browserThemeEnabled: ev.detail.storageLocation === "browser",
+          });
+          this._applyTheme(mql.matches);
+        }
 
         if (ev.detail.storageLocation === "browser") {
           storeState(this.hass!);
         } else {
-          clearStateKey(SELECTED_THEME_KEY);
-          saveSelectedTheme(this.hass!, selectedTheme);
+          if (ev.detail.saveHass) {
+            clearStateKey(SELECTED_THEME_KEY);
+          }
+          saveSelectedTheme(this.hass!, ev.detail.settings);
         }
       });
 

src/translations/en.json

@@ -7583,7 +7583,7 @@
             "description": "Overwrite user theme with custom device settings",
             "delete_header": "Delete device theme",
             "delete_description": "Are you sure you want to delete the device specific theme?",
-            "user_theme_info": "Device theme is active. Delete it to edit the user theme."
+            "user_theme_info": "Device theme is active. You won't see changes on user theme settings."
           }
         },
         "dashboard": {