Move lovelace background settings to theme (#3561)

* Move lovelace background settings to theme

While being backwards compatible

* Also update cast

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

@@ -57,10 +57,16 @@ class HcLovelace extends LitElement {
       const index = this._viewIndex;
 
       if (index !== undefined) {
-        this.shadowRoot!.querySelector("hui-view")!.style.background =
+        const configBackground =
           this.lovelaceConfig.views[index].background ||
-          this.lovelaceConfig.background ||
+          this.lovelaceConfig.background;
-          "";
+
+        if (configBackground) {
+          this.shadowRoot!.querySelector("hui-view")!.style.setProperty(
+            "--lovelace-background",
+            configBackground
+          );
+        }
       }
     }
   }

src/panels/lovelace/hui-root.ts

@@ -568,7 +568,12 @@ class HUIRoot extends LitElement {
           unusedEntities.hass = this.hass!;
         }
       );
-      root.style.background = this.config.background || "";
+      if (this.config.background) {
+        unusedEntities.style.setProperty(
+          "--lovelace-background",
+          this.config.background
+        );
+      }
       root.append(unusedEntities);
       return;
     }
@@ -597,8 +602,13 @@ class HUIRoot extends LitElement {
     }
 
     view.hass = this.hass;
-    root.style.background =
+
-      viewConfig.background || this.config.background || "";
+    const configBackground = viewConfig.background || this.config.background;
+
+    if (configBackground) {
+      view.style.setProperty("--lovelace-background", configBackground);
+    }
+
     root.append(view);
   }
 }

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

@@ -56,6 +56,9 @@ export class HuiUnusedEntities extends LitElement {
   private renderStyle(): TemplateResult {
     return html`
       <style>
+        :host {
+          background: var(--lovelace-background);
+        }
         #root {
           padding: 4px;
           display: flex;

src/panels/lovelace/hui-view.ts

@@ -121,6 +121,7 @@ export class HUIView extends LitElement {
           padding: 4px 4px 0;
           transform: translateZ(0);
           position: relative;
+          background: var(--lovelace-background);
         }
 
         #badges {