Farbe bei verschiedenen Quellen ändern

Dashboards
1

Hallo,

ich versuche grad über Custom Feature Cards, mir eine kleine Fernseher Card zu erstellen.
Habe dazu einen Helfer und eine Automation erstellt, um die Quelle zu ändern.

Nun möchte ich gerne, dass jeder Button farbig geändert wird, je nachdem welche Quelle Aktiv ist.

Das ist mein Code bisher:

type: custom:vertical-stack-in-card
cards:
  - type: media-control
    entity: media_player.wohnzimmer_fernseher
  - type: custom:custom-features-card
    features:
      - type: custom:service-call
        entries:
          - type: selector
            entity_id: input_select.fernseher_optionen
            options:
              - icon: mdi:netflix
                type: button
                entity_id: input_select.fernseher_optionen
                option: Netflix
                tap_action:
                  action: call-service
                  service: media_player.select_source
                  data:
                    source: Netflix
                  target:
                    entity_id: media_player.wohnzimmer_fernseher
                styles: |
                  :host {
                    --label-color: red;
                    {% if state_attr('media_player.wohnzimmer_fernseher', 'source') == 'Netflix' %}
                    --color: red
                    {% endif %}
                  }
              - icon: phu:disney-plus
                type: button
                entity_id: input_select.fernseher_optionen
                option: Disney+
                tap_action:
                  action: call-service
                  service: media_player.select_source
                  data:
                    source: Disney+
                  target:
                    entity_id: media_player.wohnzimmer_fernseher
                haptics: true
                styles: |
                  :host {
                    --label-color: red;
                    {% if state_attr('media_player.wohnzimmer_fernseher', 'source') == 'Disney+' %}
                    --color: orange
                    {% endif %}
                  }

Wenn Netflix aktiv ist, wird dies auch Rot angezeigt.
Wenn ich aber auf Disney+ wechsle, ändert sich die Quelle zwar, aber der Netflix Button wird Blau und der Disney+ Button färbt sich gar nicht erst.

Hat jemand einen Tipp oder eine Idee wie ich den Fehler behebe?

Würde mich sehr über eine Rückmeldung freuen.

Lieben Gruß
Marvin

2

image
image1056×770 69 KB

Versuche das mal:

type: custom:button-card
entity: media_player.wohnzimmer
show_name: false
show_entity_picture: true
entity_picture: /local/logos/netflix.png
tap_action:
  action: call-service
  service: media_player.select_source
  data:
    source: Netflix
  target:
    entity_id: media_player.wohnzimmer
styles:
  card:
    - border-radius: 10px
    - height: 60px
    - background: |
        [[[
          const a = entity?.attributes || {};
          const app = (a.app_name || a.source || '').toLowerCase();
          const isOn = entity?.state && entity.state !== 'off' && entity.state !== 'idle';

          // AVR Quelle prüfen
          const avr = states["media_player.avr_wohnzimmer_2"];
          const avrSource = (avr?.attributes?.source || "").toLowerCase();

          if (isOn && avrSource.includes("xbox")) {
            return 'linear-gradient(100deg, #A0A0A0 0%, #707070 100%)'; // Grau wenn AVR Xbox
          }
          if (isOn && app.includes("netflix")) {
            return 'linear-gradient(100deg, #4BC67A 0%, #41AA69 100%)'; // Grün für Netflix
          }
          return 'linear-gradient(100deg, #9495E0 0%, #8182C3 100%)';     // Standard
        ]]]
  entity_picture:
    - width: 80px
    - object-fit: contain
    - margin-top: 3px