Badges colour icon from entity status

Configuration Frontend
1

Hi,

I created a few badges.
Now I would like the badges to change the color of the icon when the sensor changes status.

Example:
Garage is open

  • card element icon changes and turns to yellow
  • bagde icon changes, but not colour
    LEDs:
  • card element icon shows the color of the current LED
  • badge icon is just status “on/off” no icon - no color

How can I change your badges informations…?
Do I have to edit the badges directly in the dashboard raw editor?
Or is that an entity configuration?

Dashboard raw editor

    badges:
      - entity: binary_sensor.garage
      - entity: light.bath

entity garage yaml

device_class: garage_door
friendly_name: Garage

entity led yaml

effect_list:
  - Music
supported_color_modes:
  - hs
friendly_name: Bath
supported_features: 21

badges
entity

2

That would be very difficult. I don’t have any badges.

None of the above. You have to use this:

Some examples: https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/389?u=tom_l

3

Hi,

ok I try it with “card-mod” - It’s gonna be a long day. :rofl:
If I have any further questions or the solution, I’ll let you know.

Thanks

4

Hi,

I’ve managed to be able to choose colors for the status.
Now I’m looking for a way to make it blink is my garage open.

- entity: binaray_sensor.garage
  style: >
          :host {
          color: {% if is_state('binary_sensor.garage', 'on') %} red {%else %} white {% endif %};
          --label-badge-red: {% if is_state('binary_sensor.garage', 'on') %} red {% else %} white {%endif %};
          --label-badge-text-color: {% if is_state('binary_sensor.garage', 'on') %} red {% else %} green {%endif %};
          }

Any tipp for me…

5

I think I can leave it like that. Badges change colors and flash on status.

- entity: binary_sensor.garage
        style: >
          @keyframes blinker { 50% { opacity: 0; } }
          :host {
          color: {% if is_state('binary_sensor.garage', 'on') %} red {%else %} white {% endif %};
          --label-badge-red: {% if is_state('binary_sensor.garage', 'on') %} red {% else %} white {%endif %};
          --label-badge-text-color: {% if is_state('binary_sensor.garage', 'on') %} red {% else %} green {%endif %};
          animation: {% if is_state('binary_sensor.garage', 'on') %} blinker 2s linear infinite {%endif %};
          }

It takes a long time to find “good” posts, but the result is impressive.
Thanks all…

7 Likes
6

Thank you, this works very well. With this example the complete badge is animated. Is there a way to animate just the inner text?