Changing a badge color depending on the state

Configuration Frontend
1

Hi,

I’m just starting and custom yaml is hard for me. I’d like a simple badge that shows me if there is a weather alert or not, which I was able to do. What I wasn’t able to do was making the color of the icon and state dependent on said state.

On the left is what I have, on the right what I want: image

I haven’t installed card_mod: because I’m such a noob I’m afraid I’m gonna break stuff or a breaking change will be made in a future release of HA and I won’t know how to fix it. Can it be done without card_mod? (If it can’t, I’m still interested in a solution, but I wanted to try without it first)

I installed the mushroom cards, so I have the Custom: Mushroom Template if that’s better.

Here is the yaml I tried:

type: entity
show_name: false
show_state: true
show_icon: true
entity: sensor.63_weather_alert
name: Alerte Météo
color: |
  [[[
    if (entity.state === 'vert') return 'green';
    if (entity.state === 'orange') return 'orange';
    if (entity.state === 'rouge') return 'red';
    return 'gray';
  ]]]

And yes I searched but the stuff I’ve seen either use another card that entity, or makes the change with card_mod or doesn’t work because I’m an idiot

I also tried ChatGPT which offered this:

color: {% if is_state('sensor.63_weather_alert', 'vert') %} green {% elif is_state('sensor.63_weather_alert', 'orange') %} orange {% elif is_state('sensor.63_weather_alert', 'rouge') %} red {% else %} gray {% endif %};}

To no avail…

2

ChatGTP doesn’t know what the heck it’s talking about. That code is total nonsense. Always check the docs. If it’s not in the documentation it’s not a thing.

You need card mod. Once you have it installed it’s not much more difficult to use than what you tried to do there.

You just need to figure out what element you want to style (–paper-item-icon-color is often what you want for icon color, but not always) and if you want to get fancy you can create some custom css variables in your theme. (–entity-warning-color in my example)

Here’s an example of some code that colors an icon with card_mod from my configuration.

card_mod:
  style: |
    :host {
      --paper-item-icon-color:
        {% if is_state_attr(config.entity, 'authorized', true) %} var(--state-icon-color)
        {% else %} var(--entity-warning-color)
        {% endif %}
      ;
    }
3

Your example seems to be for Entities card - and OP asked about Entity card. EDIT: he meant BADGES on the top.

2 OP:
go to main card-mod thread → 1st post → link at the bottom → styles for Entity card
card-mod is not possible for badges yet

1 Like
4

An auto-entities card at that now that I’m looking at it…lol. I grabbed the first example I came across in my config because I was just trying to demonstrate that card_mod is not that hard to use (for colouring icons anyway - I still struggle with the whole shadow dom thing for other stuff). Thanks for pointing him in the right direction to do what he actually asked for… :slight_smile:

5

If you want to stick with badges…

Badges do change color as appropriate, although you won’t be able to select the color, and it’s just the icon color, not the font too as in your example. The color and icon and dependent on the entity’s device class. For example, a device class of “problem” will show an exclamation mark in a red circle (on / problem) or a tick in a grey circle (off / no problem). Whereas if you have no device class it will show a tick in a yellow circle (on) or a hollow grey circle (off).

If your current entity doesn’t have the device class you want, an easy solution would be to create a template helper, and use that in your badge.

If you look at the documentation for badges, the properties are mostly strings, so they do not support templating.

6

1000004278
10000042781080×2316 143 KB

Gets me this → green when locked and red when unlocked.

1000004280
10000042801080×2316 188 KB

1000004279
10000042791080×2316 186 KB

7

@ baudneo Great inspiration!

I went with

type: custom:mushroom-template-badge
content: '{{states(entity)}}'
icon: mdi:weather-cloudy-alert
color: |-
  {% if is_state(entity, "Vert") %}
    green
  {% elif is_state(entity, "Jaune") %}
    yellow  
  {% elif is_state(entity, "Orange") %}
    orange  
   {% else %}
     red
   {% endif %}
entity: sensor.63_weather_alert
label: Alerte météo

Which gives me:
image image etc.

As I understand it, there is no way to change the content color, correct?

1 Like
8

Nice, glad you found your own solution.

Edit: that sounds rude, not ment to be. I mean I’m glad you figured it out to work for your application.

1 Like
9

No worries!

And my own solution is really yours…