Update easing animation function

src/data/ws-themes.ts

@@ -1,5 +1,11 @@
 import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
+import type { HomeAssistant, ThemeSettings } from "../types";
+import {
+  fetchFrontendUserData,
+  saveFrontendUserData,
+  subscribeFrontendUserData,
+} from "./frontend";
 
 export interface ThemeVars {
   // Incomplete
@@ -50,3 +56,16 @@ export const subscribeThemes = (
     conn,
     onChange
   );
+
+export const SELECTED_THEME_KEY = "selectedTheme";
+
+export const saveSelectedTheme = (hass: HomeAssistant, data?: ThemeSettings) =>
+  saveFrontendUserData(hass.connection, SELECTED_THEME_KEY, data);
+
+export const subscribeSelectedTheme = (
+  hass: HomeAssistant,
+  callback: (selectedTheme?: ThemeSettings | null) => void
+) => subscribeFrontendUserData(hass.connection, SELECTED_THEME_KEY, callback);
+
+export const fetchSelectedTheme = (hass: HomeAssistant) =>
+  fetchFrontendUserData(hass.connection, SELECTED_THEME_KEY);

src/html/index.html.template

@@ -20,6 +20,12 @@
     <meta name="color-scheme" content="dark light" />
     <%= renderTemplate("_style_base.html.template") %>
     <style>
+      ::view-transition-old(root),
+      ::view-transition-new(root) {
+        animation: none;
+        mix-blend-mode: normal;
+      }
+
       html {
         background-color: var(--primary-background-color, #fafafa);
         color: var(--primary-text-color, #212121);

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

@@ -1,11 +1,14 @@
-import "@material/mwc-button/mwc-button";
+import { mdiAlertCircleOutline } from "@mdi/js";
-import "@material/mwc-list/mwc-list-item";
 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,8 +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";
@@ -26,57 +31,78 @@ export class HaPickThemeRow extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: false })
+  public storageLocation: StorageLocation = "browser";
+
   @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 curThemeIsUseDefault = this._selectedTheme?.theme === "";
-    const curTheme = this.hass.selectedTheme?.theme
+    const curTheme = this._selectedTheme?.theme
-      ? this.hass.selectedTheme?.theme
+      ? this._selectedTheme?.theme
-      : this.hass.themes.darkMode
+      : 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">
+        <span
-          ${!hasThemes
+          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
+          ${this.storageLocation === "user" && this.hass.browserThemeEnabled
-            href=${documentationUrl(
+            ? html`<ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
-              this.hass,
+                ${this.hass.localize(
-              "/integrations/frontend/#defining-themes"
+                  "ui.panel.profile.themes.device.user_theme_info"
-            )}
+                )}`
-            target="_blank"
+            : html`<a
-            rel="noreferrer"
+                href=${documentationUrl(
-          >
+                  this.hass,
-            ${this.hass.localize("ui.panel.profile.themes.link_promo")}
+                  "/integrations/frontend/#defining-themes"
-          </a>
+                )}
+                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>
+          </ha-list-item>
-          <mwc-list-item .value=${HOME_ASSISTANT_THEME}>
+          <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>
@@ -86,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"
@@ -96,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
@@ -108,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>
@@ -121,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(
@@ -138,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"
@@ -146,19 +173,36 @@ export class HaPickThemeRow extends LitElement {
                     .name=${"accentColor"}
                     @change=${this._handleColorChange}
                   ></ha-textfield>
-                  ${themeSettings?.primaryColor || themeSettings?.accentColor
+                  ${this._selectedTheme?.primaryColor ||
-                    ? html` <mwc-button @click=${this._resetColors}>
+                  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") &&
@@ -169,13 +213,34 @@ export class HaPickThemeRow extends LitElement {
     }
   }
 
+  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: this._selectedTheme,
+      storageLocation: this.storageLocation,
+      saveHass: this._shouldSaveHass(),
+    });
+  }
+
   private _handleColorChange(ev: CustomEvent) {
     const target = ev.target as any;
-    fireEvent(this, "settheme", { [target.name]: target.value });
+    this._updateSelectedTheme({ [target.name]: target.value });
   }
 
   private _resetColors() {
-    fireEvent(this, "settheme", {
+    this._updateSelectedTheme({
       primaryColor: undefined,
       accentColor: undefined,
     });
@@ -198,18 +263,18 @@ export class HaPickThemeRow extends LitElement {
         dark = true;
         break;
     }
-    fireEvent(this, "settheme", { dark });
+    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", {
+        this._updateSelectedTheme({
           theme: "",
           primaryColor: undefined,
           accentColor: undefined,
@@ -217,7 +282,7 @@ export class HaPickThemeRow extends LitElement {
       }
       return;
     }
-    fireEvent(this, "settheme", {
+    this._updateSelectedTheme({
       theme,
       primaryColor: undefined,
       accentColor: undefined,
@@ -249,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,10 +1,12 @@
-import "@material/mwc-button";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, 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-card";
+import "../../components/ha-button";
+import "../../components/ha-expansion-panel";
+import "../../components/ha-switch";
 import "../../layouts/hass-tabs-subpage";
 import { profileSections } from "./ha-panel-profile";
 import { isExternal } from "../../data/external";
@@ -27,6 +29,7 @@ import "./ha-pick-time-zone-row";
 import "./ha-push-notifications-row";
 import "./ha-set-suspend-row";
 import "./ha-set-vibrate-row";
+import type { HaSwitch } from "../../components/ha-switch";
 
 @customElement("ha-profile-section-general")
 class HaProfileSectionGeneral extends LitElement {
@@ -38,6 +41,8 @@ class HaProfileSectionGeneral extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
+  @state() private _browserThemeActivated = false;
+
   private _unsubCoreData?: UnsubscribeFunc;
 
   private _getCoreData() {
@@ -91,9 +96,9 @@ class HaProfileSectionGeneral extends LitElement {
                 : ""}
             </div>
             <div class="card-actions">
-              <mwc-button class="warning" @click=${this._handleLogOut}>
+              <ha-button class="warning" @click=${this._handleLogOut}>
                 ${this.hass.localize("ui.panel.profile.logout")}
-              </mwc-button>
+              </ha-button>
             </div>
           </ha-card>
           <ha-card
@@ -128,6 +133,12 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-first-weekday-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
@@ -148,10 +159,42 @@ class HaProfileSectionGeneral extends LitElement {
             <div class="card-content">
               ${this.hass.localize("ui.panel.profile.client_settings_detail")}
             </div>
-            <ha-pick-theme-row
+            <ha-settings-row .narrow=${this.narrow}>
-              .narrow=${this.narrow}
+              <span slot="heading">
-              .hass=${this.hass}
+                ${this.hass.localize(
-            ></ha-pick-theme-row>
+                  isExternal
+                    ? "ui.panel.profile.themes.device.mobile_app_header"
+                    : "ui.panel.profile.themes.device.browser_header"
+                )}
+              </span>
+              <span slot="description">
+                ${this.hass.localize(
+                  "ui.panel.profile.themes.device.description"
+                )}
+              </span>
+              <ha-switch
+                .checked=${this.hass.browserThemeEnabled ||
+                this._browserThemeActivated}
+                @change=${this._toggleBrowserTheme}
+              ></ha-switch>
+            </ha-settings-row>
+            ${this.hass.browserThemeEnabled || this._browserThemeActivated
+              ? html`
+                  <ha-expansion-panel
+                    outlined
+                    .header=${this.hass.localize(
+                      "ui.panel.profile.themes.device.custom_theme"
+                    )}
+                    expanded
+                  >
+                    <ha-pick-theme-row
+                      class="device-theme"
+                      .narrow=${this.narrow}
+                      .hass=${this.hass}
+                    ></ha-pick-theme-row>
+                  </ha-expansion-panel>
+                `
+              : nothing}
             <ha-pick-dashboard-row
               .narrow=${this.narrow}
               .hass=${this.hass}
@@ -167,11 +210,11 @@ class HaProfileSectionGeneral extends LitElement {
                   "ui.panel.profile.customize_sidebar.description"
                 )}
               </span>
-              <mwc-button @click=${this._customizeSidebar}>
+              <ha-button @click=${this._customizeSidebar}>
                 ${this.hass.localize(
                   "ui.panel.profile.customize_sidebar.button"
                 )}
-              </mwc-button>
+              </ha-button>
             </ha-settings-row>
             ${this.hass.dockedSidebar !== "auto" || !this.narrow
               ? html`
@@ -225,6 +268,39 @@ class HaProfileSectionGeneral extends LitElement {
     });
   }
 
+  private async _toggleBrowserTheme(ev: Event) {
+    const switchElement = ev.target as HaSwitch;
+    const enabled = switchElement.checked;
+
+    if (!enabled) {
+      if (!this.hass.browserThemeEnabled && this._browserThemeActivated) {
+        // no changed have made, disable without confirmation
+        this._browserThemeActivated = false;
+      } else {
+        const confirm = await showConfirmationDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.profile.themes.device.delete_header"
+          ),
+          text: this.hass.localize(
+            "ui.panel.profile.themes.device.delete_description"
+          ),
+          confirmText: this.hass.localize("ui.common.delete"),
+          destructive: true,
+        });
+
+        if (confirm) {
+          this._browserThemeActivated = false;
+          fireEvent(this, "resetBrowserTheme");
+        } else {
+          // revert switch
+          switchElement.click();
+        }
+      }
+    } else {
+      this._browserThemeActivated = true;
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -251,6 +327,14 @@ class HaProfileSectionGeneral extends LitElement {
           text-align: center;
           color: var(--secondary-text-color);
         }
+
+        ha-expansion-panel {
+          margin: 0 8px 8px;
+        }
+        .device-theme {
+          display: block;
+          padding-bottom: 16px;
+        }
       `,
     ];
   }

src/state/themes-mixin.ts

@@ -3,18 +3,37 @@ import {
   invalidateThemeCache,
 } from "../common/dom/apply_themes_on_element";
 import type { HASSDomEvent } from "../common/dom/fire_event";
-import { subscribeThemes } from "../data/ws-themes";
+import {
-import type { Constructor, HomeAssistant } from "../types";
+  fetchSelectedTheme,
-import { storeState } from "../util/ha-pref-storage";
+  saveSelectedTheme,
+  SELECTED_THEME_KEY,
+  subscribeSelectedTheme,
+  subscribeThemes,
+} from "../data/ws-themes";
+import type { Constructor, HomeAssistant, ThemeSettings } from "../types";
+import { clearStateKey, storeState } from "../util/ha-pref-storage";
 import type { HassBaseEl } from "./hass-base-mixin";
 
+export type StorageLocation = "user" | "browser";
+
+interface SetThemeSettings {
+  settings: ThemeSettings;
+  storageLocation: StorageLocation;
+  saveHass: boolean;
+}
+
 declare global {
   // for add event listener
   interface HTMLElementEventMap {
-    settheme: HASSDomEvent<Partial<HomeAssistant["selectedTheme"]>>;
+    settheme: HASSDomEvent<SetThemeSettings>;
   }
   interface HASSDomEvents {
-    settheme: Partial<HomeAssistant["selectedTheme"]>;
+    settheme: SetThemeSettings;
+    resetBrowserTheme: undefined;
+  }
+
+  interface FrontendUserData {
+    selectedTheme?: ThemeSettings;
   }
 }
 
@@ -27,16 +46,38 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
     protected firstUpdated(changedProps) {
       super.firstUpdated(changedProps);
       this.addEventListener("settheme", (ev) => {
-        this._updateHass({
+        if (ev.detail.saveHass) {
-          selectedTheme: {
+          this._updateHass({
-            ...this.hass!.selectedTheme!,
+            selectedTheme: ev.detail.settings,
-            ...ev.detail,
+            browserThemeEnabled: ev.detail.storageLocation === "browser",
-          },
+          });
-        });
+          this._animateApplyTheme(mql.matches);
-        this._applyTheme(mql.matches);
+        }
-        storeState(this.hass!);
+
+        if (ev.detail.storageLocation === "browser") {
+          storeState(this.hass!);
+        } else {
+          if (ev.detail.saveHass) {
+            clearStateKey(SELECTED_THEME_KEY);
+          }
+          saveSelectedTheme(this.hass!, ev.detail.settings);
+        }
       });
-      mql.addListener((ev) => this._applyTheme(ev.matches));
+
+      this.addEventListener("resetBrowserTheme", async () => {
+        clearStateKey(SELECTED_THEME_KEY);
+        const selectedTheme = await fetchSelectedTheme(this.hass!);
+        this._updateHass({
+          selectedTheme,
+          browserThemeEnabled: false,
+        });
+        this._animateApplyTheme(mql.matches);
+      });
+
+      mql.addEventListener("change", (ev) =>
+        this._animateApplyTheme(ev.matches)
+      );
+
       if (!this._themeApplied && mql.matches) {
         applyThemesOnElement(
           document.documentElement,
@@ -63,6 +104,62 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         invalidateThemeCache();
         this._applyTheme(mql.matches);
       });
+
+      subscribeSelectedTheme(
+        this.hass!,
+        (selectedTheme?: ThemeSettings | null) => {
+          if (
+            !window.localStorage.getItem(SELECTED_THEME_KEY) &&
+            selectedTheme
+          ) {
+            this._themeApplied = true;
+            this._updateHass({
+              selectedTheme,
+              browserThemeEnabled: false,
+            });
+            this._applyTheme(mql.matches);
+          }
+        }
+      );
+    }
+
+    private async _animateApplyTheme(darkPreferred: boolean) {
+      if (!this.hass) {
+        return;
+      }
+
+      if (!document.startViewTransition || !document.documentElement.animate) {
+        this._applyTheme(darkPreferred);
+      } else {
+        await document.startViewTransition(() => {
+          this._applyTheme(darkPreferred);
+        }).ready;
+
+        const { top, left, width, height } =
+          document.documentElement.getBoundingClientRect();
+        const x = left + width / 2;
+        const y = top + height / 2;
+        const right = window.innerWidth - left;
+        const bottom = window.innerHeight - top;
+        const maxRadius = Math.hypot(
+          Math.max(left, right),
+          Math.max(top, bottom)
+        );
+
+        document.documentElement.animate(
+          {
+            clipPath: [
+              `circle(0px at ${x}px ${y}px)`,
+              `circle(${maxRadius}px at ${x}px ${y}px)`,
+            ],
+          },
+          {
+            duration: 500,
+            easing: "linear(0, 0.1, 1)",
+            pseudoElement: "::view-transition-new(root)",
+          }
+        );
+      }
     }
 
     private _applyTheme(darkPreferred: boolean) {

src/translations/en.json

@@ -7575,7 +7575,16 @@
           "primary_color": "Primary color",
           "accent_color": "Accent color",
           "reset": "Reset",
-          "use_default": "Use default theme"
+          "use_default": "Use default theme",
+          "device": {
+            "browser_header": "Browser theme",
+            "mobile_app_header": "Mobile app theme",
+            "custom_theme": "Custom theme",
+            "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. You won't see changes on user theme settings."
+          }
         },
         "dashboard": {
           "header": "Dashboard",

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,9 +12,17 @@ const STORED_STATE = [
   "defaultPanel",
 ];
 
+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,
@@ -32,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") {
@@ -55,3 +67,9 @@ export function getState() {
 export function clearState() {
   window.localStorage.clear();
 }
+
+export function clearStateKey(key: string) {
+  if (CLEARABLE_STATE.includes(key)) {
+    window.localStorage.removeItem(key);
+  }
+}

test/util/ha-pref-storage.test.ts

@@ -6,6 +6,7 @@ describe("ha-pref-storage", () => {
   const mockHass = {
     dockedSidebar: "auto",
     selectedTheme: { theme: "default" },
+    vibrate: "false",
     unknownKey: "unknownValue",
   };
 
@@ -24,15 +25,11 @@ describe("ha-pref-storage", () => {
     window.localStorage.setItem = vi.fn();
 
     storeState(mockHass as unknown as HomeAssistant);
-    expect(window.localStorage.setItem).toHaveBeenCalledTimes(8);
+    expect(window.localStorage.setItem).toHaveBeenCalledTimes(7);
     expect(window.localStorage.setItem).toHaveBeenCalledWith(
       "dockedSidebar",
       JSON.stringify("auto")
     );
-    expect(window.localStorage.setItem).toHaveBeenCalledWith(
-      "selectedTheme",
-      JSON.stringify({ theme: "default" })
-    );
     expect(window.localStorage.setItem).toHaveBeenCalledWith(
       "selectedLanguage",
       JSON.stringify(null)
@@ -41,13 +38,19 @@ describe("ha-pref-storage", () => {
       "unknownKey",
       JSON.stringify("unknownValue")
     );
+
+    // browserThemeEnabled is not set in mockHass, so selectedTheme should not be stored
+    expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
+      "selectedTheme",
+      JSON.stringify({ theme: "default" })
+    );
   });
 
   test("storeState fails", async () => {
     const { storeState } = await import("../../src/util/ha-pref-storage");
 
     window.localStorage.setItem = vi.fn((key) => {
-      if (key === "selectedTheme") {
+      if (key === "selectedLanguage") {
         throw new Error("Test error");
       }
     });
@@ -65,13 +68,13 @@ describe("ha-pref-storage", () => {
       JSON.stringify("auto")
     );
     expect(window.localStorage.setItem).toHaveBeenCalledWith(
-      "selectedTheme",
-      JSON.stringify({ theme: "default" })
-    );
-    expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
       "selectedLanguage",
       JSON.stringify(null)
     );
+    expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
+      "vibrate",
+      JSON.stringify("false")
+    );
     // eslint-disable-next-line no-console
     expect(console.warn).toHaveBeenCalledOnce();
     // eslint-disable-next-line no-console
@@ -87,7 +90,7 @@ describe("ha-pref-storage", () => {
 
     window.localStorage.setItem("selectedTheme", JSON.stringify("test"));
     window.localStorage.setItem("dockedSidebar", JSON.stringify(true));
-    window.localStorage.setItem("selectedLanguage", JSON.stringify("german"));
+    window.localStorage.setItem("selectedLanguage", JSON.stringify("de"));
 
     // should not be in state
     window.localStorage.setItem("testEntry", JSON.stringify("this is a test"));
@@ -96,7 +99,21 @@ describe("ha-pref-storage", () => {
     expect(state).toEqual({
       dockedSidebar: "docked",
       selectedTheme: { theme: "test" },
-      selectedLanguage: "german",
+      browserThemeEnabled: true,
+      selectedLanguage: "de",
+    });
+  });
+
+  test("getState without theme", async () => {
+    const { getState } = await import("../../src/util/ha-pref-storage");
+
+    window.localStorage.setItem("dockedSidebar", JSON.stringify(true));
+    window.localStorage.setItem("selectedLanguage", JSON.stringify("de"));
+
+    const state = getState();
+    expect(state).toEqual({
+      dockedSidebar: "docked",
+      selectedLanguage: "de",
     });
   });