Fix storeState overrides user theme

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

@@ -12,12 +12,11 @@ import "../../components/ha-svg-icon";
 import "../../layouts/hass-tabs-subpage";
 import { profileSections } from "./ha-panel-profile";
 import { isExternal } from "../../data/external";
-import { SELECTED_THEME_KEY } from "../../data/ws-themes";
 import type { CoreFrontendUserData } from "../../data/frontend";
 import { getOptimisticFrontendUserDataCollection } from "../../data/frontend";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../resources/styles";
-import type { HomeAssistant, Route, ThemeSettings } from "../../types";
+import type { HomeAssistant, Route } from "../../types";
 import "./ha-advanced-mode-row";
 import "./ha-enable-shortcuts-row";
 import "./ha-force-narrow-row";
@@ -32,7 +31,6 @@ import "./ha-pick-time-zone-row";
 import "./ha-push-notifications-row";
 import "./ha-set-suspend-row";
 import "./ha-set-vibrate-row";
-import { storage } from "../../common/decorators/storage";
 import type { HaSwitch } from "../../components/ha-switch";
 
 @customElement("ha-profile-section-general")
@@ -45,13 +43,6 @@ class HaProfileSectionGeneral extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @storage({
-    key: SELECTED_THEME_KEY,
-    state: true,
-    subscribe: true,
-  })
-  private _browserThemeSettings?: ThemeSettings;
-
   @state() private _browserThemeActivated = false;
 
   private _unsubCoreData?: UnsubscribeFunc;
@@ -144,7 +135,7 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-first-weekday-row>
-            ${this._browserThemeSettings || this._browserThemeActivated
+            ${this.hass.browserThemeEnabled || this._browserThemeActivated
               ? html`
                   <ha-settings-row .narrow=${this.narrow}>
                     <span slot="heading">
@@ -198,12 +189,12 @@ class HaProfileSectionGeneral extends LitElement {
                 )}
               </span>
               <ha-switch
-                .checked=${!!this._browserThemeSettings ||
+                .checked=${this.hass.browserThemeEnabled ||
                 this._browserThemeActivated}
                 @change=${this._toggleBrowserTheme}
               ></ha-switch>
             </ha-settings-row>
-            ${this._browserThemeSettings || this._browserThemeActivated
+            ${this.hass.browserThemeEnabled || this._browserThemeActivated
               ? html`
                   <ha-expansion-panel
                     outlined
@@ -298,7 +289,7 @@ class HaProfileSectionGeneral extends LitElement {
     const enabled = switchElement.checked;
 
     if (!enabled) {
-      if (!this._browserThemeSettings && this._browserThemeActivated) {
+      if (!this.hass.browserThemeEnabled && this._browserThemeActivated) {
         // no changed have made, disable without confirmation
         this._browserThemeActivated = false;
       } else {
@@ -315,7 +306,6 @@ class HaProfileSectionGeneral extends LitElement {
 
         if (confirm) {
           this._browserThemeActivated = false;
-          this._browserThemeSettings = undefined;
           fireEvent(this, "resetBrowserTheme");
         } else {
           // revert switch

src/state/themes-mixin.ts

@@ -51,6 +51,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         };
         this._updateHass({
           selectedTheme,
+          browserThemeEnabled: ev.detail.storageLocation === "browser",
         });
         this._applyTheme(mql.matches);
 
@@ -67,6 +68,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         const selectedTheme = await fetchSelectedTheme(this.hass!);
         this._updateHass({
           selectedTheme,
+          browserThemeEnabled: false,
         });
         this._applyTheme(mql.matches);
       });
@@ -108,7 +110,10 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
             selectedTheme
           ) {
             this._themeApplied = true;
-            this._updateHass({ selectedTheme });
+            this._updateHass({
+              selectedTheme,
+              browserThemeEnabled: false,
+            });
             this._applyTheme(mql.matches);
           }
         }

src/types.ts

@@ -223,6 +223,7 @@ export interface HomeAssistant {
   config: HassConfig;
   themes: Themes;
   selectedTheme: ThemeSettings | null;
+  browserThemeEnabled?: boolean;
   panels: Panels;
   panelUrl: string;
   // i18n

src/util/ha-pref-storage.ts

@@ -1,8 +1,9 @@
+import { SELECTED_THEME_KEY } from "../data/ws-themes";
 import type { HomeAssistant } from "../types";
 
 const STORED_STATE = [
   "dockedSidebar",
-  "selectedTheme",
+  SELECTED_THEME_KEY,
   "selectedLanguage",
   "vibrate",
   "debugConnection",
@@ -11,11 +12,17 @@ const STORED_STATE = [
   "defaultPanel",
 ];
 
-const CLEARABLE_STATE = ["selectedTheme"];
+const CLEARABLE_STATE = [SELECTED_THEME_KEY];
 
 export function storeState(hass: HomeAssistant) {
   try {
-    STORED_STATE.forEach((key) => {
+    const states = [...STORED_STATE];
+
+    if (!hass.browserThemeEnabled) {
+      states.splice(states.indexOf(SELECTED_THEME_KEY), 1);
+    }
+
+    states.forEach((key) => {
       const value = hass[key];
       window.localStorage.setItem(
         key,
@@ -34,15 +41,18 @@ export function storeState(hass: HomeAssistant) {
 }
 
 export function getState() {
-  const state = {};
+  const state: Partial<HomeAssistant> = {};
 
   STORED_STATE.forEach((key) => {
     const storageItem = window.localStorage.getItem(key);
     if (storageItem !== null) {
       let value = JSON.parse(storageItem);
       // selectedTheme went from string to object on 20200718
-      if (key === "selectedTheme" && typeof value === "string") {
+      if (key === SELECTED_THEME_KEY) {
-        value = { theme: value };
+        if (typeof value === "string") {
+          value = { theme: value };
+        }
+        state.browserThemeEnabled = true;
       }
       // dockedSidebar went from boolean to enum on 20190720
       if (key === "dockedSidebar" && typeof value === "boolean") {