Badge icon colour to reflect the state of a binary sensor

Feature Requests
1

I’m posting this as a feature request since I couldn’t find any solutions to this.

I want to have a badge (in the badges section of a view) where the icon’s colour reflects the state.

As an analogy, when you put e.g. a light entity in an entity card, by default the icon will turn yellow when it’s on.

This is not the case where others are recreating badges on cards to look like the Lovelace built-in functionality. The solution to this seems to be the Custom UI add-on.

For binary sensors, there is a default behaviour that changes the icon but not the colour. E.g. the built-in updater binary sensor will switch between a circle (when there is no update available) and a checkmark (when there is an update available). This works well and is a good default.

However, when wanting to use custom icons, a colour might emphasise the state better. In my case, I have binary sensors to indicate e.g. whether anybody is home, the Internet is connected and whether my electricity feed is on (the latter is necessary as I live in a country where “load shedding” is a thing).

To follow the existing pattern, I’ve chosen some custom icons:

  • mdi:home-account vs mdi:home
  • mdi:power-plug vs mdi:power-plug-off
  • mdi:server-network vs mdi:server-network-off
  • mdi:motion-sensor vs mdi:walk

I then define template binary sensors like this one:

- platform: template
  sensors:
    internet_connection:
      friendly_name: "Internet"
      device_class: connectivity
      value_template: >-
        {{ is_state('binary_sensor.internet', 'on') }}
      delay_off:
        minutes: 1
      icon_template: >-
        {% if is_state('binary_sensor.internet', 'on') %}
          mdi:server-network
        {% else %}
          mdi:server-network-off
        {% endif %}

This works well, but I feel that if one considers the on/off icons that a state colour would work better.

2

Badges don’t get much love in standard Lovelace, and card_mod is probably your best option. See here for how to style badges. It doesn’t require custom_ui, which is no longer maintained.

Agreed that it would be nice to have more flexible badge support. I, and many others, just moved to panel mode and built “badges” with a set of button cards or something similar. Much more flexible, but also a bit more work to get going.

3

Thank you for completing the picture and bringing mod_card to my attention. I’ve glanced over it before and saw it mentioned a few times on the custom button card thread, but haven’t checked it out thoroughly.

It’s an interesting alternative to style the badge itself. I’ll give it some thought too.

I quickly hacked this together (keeping my icons from before):

    badges:
      - entity: binary_sensor.motion_detected
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $:
                  .value: |
                      ha-icon {
                        color: {% if is_state('binary_sensor.motion_detected', 'on') %} red {% else %} green {% endif %} !important;
                      }

Now the icon changes and turns it red if on. If there is a better or shorter way to achieve the same results, I’d be keen to learn.

4

That may be what you need to color the icon and not just the outline. card_mod often requires some experimentation to get what you want, but you can usually get there. I hear a new version is coming soon.

5

Here is my final version then that uses the theme colour:

    badges:
      - entity: binary_sensor.motion_detected
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $:
                  .value: |
                      ha-icon {
                        color: {{ "var(--state-icon-active-color)" if is_state('binary_sensor.motion_detected', 'on') }} !important;
                      }

And this is what it looks like:

badges

1 Like
6

where do you place this code? which file? I can’t figure it out.

1 Like
7

Each view in a dashboard has a badges section: https://www.home-assistant.io/lovelace/dashboards-and-views/.

1 Like
8

Is this still working for you? I cannot seem to get this working? Other than the card-mod addon via HACS, what else do I need?

9

There’s been some changes to the Lovelace UI code. Also see the the two major card-mod threads for such updates.

My current version:

  - entity: binary_sensor.foyer_motion_detected
    name: Foyer Motion
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .value {
                  color: {{ "var(--state-icon-active-color)" if is_state(config.entity, 'on') }} !important;
                }
1 Like
10

No luck, no errors either. Usually with anything HASS, you do it wrong and it tells you. Do I have to set an active color someplace?

11

Most of the time, card-mod won’t cause any errors: the styles simply won’t be applied. You will need to inspect and manipulate the DOM by hand in your browser to try and figure out what is wrong. I’m running 2022.2.9 with card-mod 3.1.2. Maybe it’s something with your versions.

Try to seek help or find more examples here:

It’s defined by the default theme, so it would depend on the theme you use how it’s set. You can see this using the developer tools in your browser.

12

I got it working, not exactly sure what it was, but I suspect a spacing issue on my end. Thanks!

1 Like