Garagentor Icon Farbe anpassen

Dashboard/Cards/Frontend
,
1

Hallo zusammen,
ich bin recht neu bei HA und ganz neu hier in der Community.

Ich habe mit mit dem Template Cover ein Garagentor gebaut. Das funktioniert auch soweit gut aber ich bekomme es leider nicht hin bei geöffneter Garage die Farbe des Icon anzupassen. Ich nutze für die Darstellung die “Button” Karte. Habe dort meine cover template als Entität angegeben.

Im template cover gibt es die Property icon_template. Über diese definiere ich die icon Dateien für die jeweilige Anzeige.

icon_template: >-
        {% if is_state('binary_sensor.garagentor_auf', 'on') %}
          mdi:garage-open-variant
        {% elif is_state('binary_sensor.garagentor_zu', 'on') %}
          mdi:garage-variant
        {% else %}
          mdi:garage-alert-variant
        {% endif %}

jetzt würde ich gerne beim Zustand “offen” die Einfärbung so vornehmen wie es bei den anderen Button auch ist. Aktuell wird die Garage bei “offen” leicht lila eingefärbt. Siehe unterschiedliche auf den 2 Bildern.

Wo muss ich ansetzen? im Template Cover oder beim Button?

Bildschirmfoto 2025-03-11 um 08.24.26
Bildschirmfoto 2025-03-11 um 08.24.34

2

Mein Skript mit der custom button-card

Gruss

type: custom:button-card
entity: switch.garagentor_garagentor
name: Garagentor
size: 40%
icon: |

  [[[
   if (states['binary_sensor.0x00158d000a8198ff_contact'].state === "off")
   return "mdi:garage-lock" ;
   else if (states['binary_sensor.0x00158d000a8198ff_contact'].state === "on")
              return "mdi:garage-open" ;
          ]]]
styles:
  icon:
    - color: >
        [[[  

        if (states['binary_sensor.0x00158d000a8198ff_contact'].state == 'off')
          return "green";
        else if (states['binary_sensor.0x00158d000a8198ff_contact'].state ==
        'on')
           return "red";
        ]]]
3

Meine Umsetzung, ebenfalls mit der Custom-Buttoncard:

type: custom:button-card
entity: binary_sensor.garagentorkontaktnamehierrein
color: auto
name: " "
state:
  - value: "off"
    icon: mdi:garage-variant-lock
    color: green
  - value: "on"
    icon: mdi:garage-open-variant
    color: red
4

Klasse danke euch. Gucke ich mir direkt mal an. aber ne “native” Lösung ohne weitere add-ons gibts nicht?

5

Simon hat mal ein Video zum Thema Icon-Farbe gemacht:

1 „Gefällt mir“