Allow themeing of media control card (#8209)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -332,7 +332,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
-    if (!this._config || !this.hass || !changedProps.has("hass")) {
+    if (!this._config || !this.hass || (!changedProps.has("_config") && !changedProps.has("hass"))) {
       return;
     }
 

src/panels/lovelace/cards/types.ts

@@ -37,6 +37,7 @@ export interface EmptyStateCardConfig extends LovelaceCardConfig {
 export interface EntityCardConfig extends LovelaceCardConfig {
   attribute?: string;
   unit?: string;
+  theme?: string;
 }
 
 export interface EntitiesCardEntityConfig extends EntityConfig {
@@ -174,6 +175,7 @@ export interface LogbookCardConfig extends LovelaceCardConfig {
   entities: string[];
   title?: string;
   hours_to_show?: number;
+  theme?: string;
 }
 
 export interface MapCardConfig extends LovelaceCardConfig {
@@ -198,6 +200,7 @@ export interface MarkdownCardConfig extends LovelaceCardConfig {
 
 export interface MediaControlCardConfig extends LovelaceCardConfig {
   entity: string;
+  theme?: string;
 }
 
 export interface HistoryGraphCardConfig extends LovelaceCardConfig {
@@ -311,4 +314,5 @@ export interface WeatherForecastCardConfig extends LovelaceCardConfig {
   name?: string;
   show_forecast?: boolean;
   secondary_info_attribute?: string;
+  theme?: string;
 }

src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts

@@ -11,12 +11,14 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { MediaControlCardConfig } from "../../cards/types";
+import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 
 const cardConfigStruct = object({
   type: string(),
   entity: optional(string()),
+  theme: optional(string()),
 });
 
 const includeDomains = ["media_player"];
@@ -37,6 +39,10 @@ export class HuiMediaControlCardEditor extends LitElement
     return this._config!.entity || "";
   }
 
+  get _theme(): string {
+    return this._config!.theme || "";
+  }
+
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
@@ -57,6 +63,12 @@ export class HuiMediaControlCardEditor extends LitElement
           @change="${this._valueChanged}"
           allow-custom-entity
         ></ha-entity-picker>
+        <hui-theme-select-editor
+          .hass=${this.hass}
+          .value=${this._theme}
+          .configValue=${"theme"}
+          @value-changed=${this._valueChanged}
+        ></hui-theme-select-editor>
       </div>
     `;
   }

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -74,6 +74,12 @@ export class HuiPictureCardEditor extends LitElement
           .configValue="${"image"}"
           @value-changed="${this._valueChanged}"
         ></paper-input>
+        <hui-theme-select-editor
+          .hass=${this.hass}
+          .value="${this._theme}"
+          .configValue="${"theme"}"
+          @value-changed="${this._valueChanged}"
+        ></hui-theme-select-editor>
         <div class="side-by-side">
           <hui-action-editor
             .label="${this.hass.localize(
@@ -99,12 +105,6 @@ export class HuiPictureCardEditor extends LitElement
             .configValue="${"hold_action"}"
             @value-changed="${this._valueChanged}"
           ></hui-action-editor>
-          <hui-theme-select-editor
-            .hass=${this.hass}
-            .value="${this._theme}"
-            .configValue="${"theme"}"
-            @value-changed="${this._valueChanged}"
-          ></hui-theme-select-editor>
         </div>
       </div>
     `;

src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts

@@ -215,6 +215,12 @@ export class HuiPictureEntityCardEditor extends LitElement
             ></ha-formfield>
           </div>
         </div>
+        <hui-theme-select-editor
+          .hass=${this.hass}
+          .value="${this._theme}"
+          .configValue="${"theme"}"
+          @value-changed="${this._valueChanged}"
+        ></hui-theme-select-editor>
         <div class="side-by-side">
           <hui-action-editor
             .label="${this.hass.localize(
@@ -240,12 +246,6 @@ export class HuiPictureEntityCardEditor extends LitElement
             .configValue="${"hold_action"}"
             @value-changed="${this._valueChanged}"
           ></hui-action-editor>
-          <hui-theme-select-editor
-            .hass=${this.hass}
-            .value="${this._theme}"
-            .configValue="${"theme"}"
-            @value-changed="${this._valueChanged}"
-          ></hui-theme-select-editor>
         </div>
       </div>
     `;