Add fixed background support in iOS and improve the way we set view background

cast/src/launcher/layout/hc-cast.ts

@@ -1,5 +1,6 @@
 import "@material/mwc-button/mwc-button";
-import { ActionDetail } from "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-list";
+import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import { Auth, Connection } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
@@ -89,8 +90,8 @@ class HcCast extends LitElement {
                       generateDefaultViewConfig({}, {}, {}, {}, () => ""),
                     ]
                   ).map(
-                    (view, idx) =>
-                      html`<ha-list-item
+                    (view, idx) => html`
+                      <ha-list-item
                         graphic="avatar"
                         .activated=${this.castManager.status?.lovelacePath ===
                         (view.path ?? idx)}
@@ -108,8 +109,9 @@ class HcCast extends LitElement {
                           : html`<ha-svg-icon
                               slot="item-icon"
                               .path=${mdiViewDashboard}
-                            ></ha-svg-icon>`}</ha-list-item
-                      > `
+                            ></ha-svg-icon>`}
+                      </ha-list-item>
+                    `
                   )}</mwc-list
                 >
               `}

cast/src/receiver/layout/hc-lovelace.ts

@@ -1,10 +1,11 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
 import { getPanelTitleFromUrlPath } from "../../../../src/data/panel";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
+import "../../../../src/panels/lovelace/views/hui-view-container";
 import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
 
@@ -22,8 +23,6 @@ class HcLovelace extends LitElement {
 
   @property() public urlPath: string | null = null;
 
-  @query("hui-view") private _huiView?: HTMLElement;
-
   protected render(): TemplateResult {
     const index = this._viewIndex;
     if (index === undefined) {
@@ -47,12 +46,22 @@ class HcLovelace extends LitElement {
       setEditMode: () => undefined,
       showToast: () => undefined,
     };
+
+    const viewConfig = this.lovelaceConfig.views[index];
+    const background = viewConfig.background || this.lovelaceConfig.background;
+
     return html`
-      <hui-view
+      <hui-view-container
         .hass=${this.hass}
-        .lovelace=${lovelace}
-        .index=${index}
-      ></hui-view>
+        .background=${background}
+        .theme=${viewConfig.theme}
+      >
+        <hui-view
+          .hass=${this.hass}
+          .lovelace=${lovelace}
+          .index=${index}
+        ></hui-view>
+      </hui-view-container>
     `;
   }
 
@@ -82,26 +91,6 @@ class HcLovelace extends LitElement {
                 }${viewTitle || ""}`
               : undefined,
         });
-
-        const configBackground =
-          this.lovelaceConfig.views[index].background ||
-          this.lovelaceConfig.background;
-
-        const backgroundStyle =
-          typeof configBackground === "string"
-            ? configBackground
-            : configBackground?.image
-              ? `center / cover no-repeat url('${configBackground.image}')`
-              : undefined;
-
-        if (backgroundStyle) {
-          this._huiView!.style.setProperty(
-            "--lovelace-background",
-            backgroundStyle
-          );
-        } else {
-          this._huiView!.style.removeProperty("--lovelace-background");
-        }
       }
     }
   }
@@ -125,19 +114,15 @@ class HcLovelace extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
-        min-height: 100vh;
-        height: 0;
+      hui-view-container {
         display: flex;
-        flex-direction: column;
+        position: relative;
+        min-height: 100vh;
         box-sizing: border-box;
-        background: var(--primary-background-color);
-      }
-      :host > * {
-        flex: 1;
       }
       hui-view {
-        background: var(--lovelace-background, var(--primary-background-color));
+        flex: 1 1 100%;
+        max-width: 100%;
       }
     `;
   }

src/panels/energy/ha-panel-energy.ts

@@ -18,6 +18,7 @@ import { HomeAssistant } from "../../types";
 import "../lovelace/components/hui-energy-period-selector";
 import { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
+import "../lovelace/views/hui-view-container";
 import { navigate } from "../../common/navigate";
 import {
   getEnergyDataCollection,
@@ -108,14 +109,18 @@ class PanelEnergy extends LitElement {
           </hui-energy-period-selector>
         </div>
       </div>
-      <div id="view" @reload-energy-panel=${this._reloadView}>
+
+      <hui-view-container
+        .hass=${this.hass}
+        @reload-energy-panel=${this._reloadView}
+      >
         <hui-view
           .hass=${this.hass}
           .narrow=${this.narrow}
           .lovelace=${this._lovelace}
           .index=${this._viewIndex}
         ></hui-view>
-      </div>
+      </hui-view-container>
     `;
   }
 
@@ -389,23 +394,19 @@ class PanelEnergy extends LitElement {
           line-height: 20px;
           flex-grow: 1;
         }
-        #view {
+        hui-view-container {
           position: relative;
           display: flex;
-          padding-top: calc(var(--header-height) + env(safe-area-inset-top));
           min-height: 100vh;
           box-sizing: border-box;
+          padding-top: calc(var(--header-height) + env(safe-area-inset-top));
           padding-left: env(safe-area-inset-left);
           padding-right: env(safe-area-inset-right);
           padding-inline-start: env(safe-area-inset-left);
           padding-inline-end: env(safe-area-inset-right);
           padding-bottom: env(safe-area-inset-bottom);
-          background: var(
-            --lovelace-background,
-            var(--primary-background-color)
-          );
         }
-        #view > * {
+        hui-view {
           flex: 1 1 100%;
           max-width: 100%;
         }

src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts

@@ -167,7 +167,6 @@ export class HuiUnusedEntities extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        background: var(--lovelace-background);
         overflow: hidden;
       }
       .container {

src/panels/lovelace/hui-root.ts

@@ -62,6 +62,7 @@ import {
   fetchDashboards,
   updateDashboard,
 } from "../../data/lovelace/dashboard";
+import { getPanelTitle } from "../../data/panel";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -80,8 +81,8 @@ import { getLovelaceStrategy } from "./strategies/get-strategy";
 import { isLegacyStrategyConfig } from "./strategies/legacy-strategy";
 import type { Lovelace } from "./types";
 import "./views/hui-view";
+import "./views/hui-view-container";
 import type { HUIView } from "./views/hui-view";
-import { getPanelTitle } from "../../data/panel";
 
 @customElement("hui-root")
 class HUIRoot extends LitElement {
@@ -291,6 +292,8 @@ class HUIRoot extends LitElement {
       ? getPanelTitle(this.hass, this.panel)
       : undefined;
 
+    const background = curViewConfig?.background || this.config.background;
+
     return html`
       <div
         class=${classMap({
@@ -469,7 +472,14 @@ class HUIRoot extends LitElement {
               `
             : ""}
         </div>
-        <div id="view" @ll-rebuild=${this._debouncedConfigChanged}></div>
+        <hui-view-container
+          .hass=${this.hass}
+          .background=${background}
+          .theme=${curViewConfig?.theme}
+          id="view"
+          @ll-rebuild=${this._debouncedConfigChanged}
+        >
+        </hui-view-container>
       </div>
     `;
   }
@@ -937,21 +947,6 @@ class HUIRoot extends LitElement {
     view.hass = this.hass;
     view.narrow = this.narrow;
 
-    const configBackground = viewConfig.background || this.config.background;
-
-    const backgroundStyle =
-      typeof configBackground === "string"
-        ? configBackground
-        : configBackground?.image
-          ? `center / cover no-repeat url('${configBackground.image}')`
-          : undefined;
-
-    if (backgroundStyle) {
-      root.style.setProperty("--lovelace-background", backgroundStyle);
-    } else {
-      root.style.removeProperty("--lovelace-background");
-    }
-
     root.appendChild(view);
   }
 
@@ -1063,30 +1058,26 @@ class HUIRoot extends LitElement {
         mwc-button.warning:not([disabled]) {
           color: var(--error-color);
         }
-        #view {
+        hui-view-container {
           position: relative;
           display: flex;
-          padding-top: calc(var(--header-height) + env(safe-area-inset-top));
           min-height: 100vh;
           box-sizing: border-box;
+          padding-top: calc(var(--header-height) + env(safe-area-inset-top));
           padding-left: env(safe-area-inset-left);
           padding-right: env(safe-area-inset-right);
           padding-inline-start: env(safe-area-inset-left);
           padding-inline-end: env(safe-area-inset-right);
           padding-bottom: env(safe-area-inset-bottom);
-          background: var(
-            --lovelace-background,
-            var(--primary-background-color)
-          );
         }
-        #view > * {
+        hui-view-container > * {
           flex: 1 1 100%;
           max-width: 100%;
         }
         /**
          * In edit mode we have the tab bar on a new line *
          */
-        .edit-mode #view {
+        .edit-mode hui-view-container {
           padding-top: calc(
             var(--header-height) + 48px + env(safe-area-inset-top)
           );