How To: Conditional formatting in Home Assistant

In the house in Nijmegen, we had a sensor that monitored air quality (CO2 concentration, humidity and temperature) that could open the roof hatch for ventilation if any of those parameters go outside of established limits (and it’s not too cold outside and it’s not raining…) It’s amazing how air quality (especially CO2 concentration) affects your mood and energy levels, so we were very pleased with it. (Especially because we got it for free…)

Of course, since that was part of the home installation in Nijmegen, it was left behind for the new owners to figure out. But I wanted to get a similar monitor set up in the “new” house too. Just monitoring initially, but by hooking it up to Home Assistant, we could add some automations in the future. I decided on this home-made sensor because it’s much cheaper than the alternatives. And while it’s possible to run it stand-alone (it even comes with a built-in webserver which shows a dashboard!), I did configure it to send data to Home Assistant.

So in Home Assistant I have three entities added: one each for CO2 concentration, humidity and temperature. I added those three to the bespoke dashboard I created for use with the mobile app. And I thought it would be fun to add “conditional formatting” like in Excel: if the CO2 concentration is below a certain threshold, the text is green, between two values it’s orange and above a certain limit it’s red — making it easy to gauge air quality a a glance.

Various online posts assured me that this was possible, but I could not find a clear-cut how-to. I had to piece things together from multiple forum posts that each provided a piece of the puzzle. (I do not rule out that I am bad at searching and/or interpreting these posts, though.) So for everyone wanting to know how to do this, I provide this small how-to.

First, you need to install the card-mod extension. I think I used the HACS installation mode, that worked fine. Now you can add extra CSS styling in the YAML definition of any card.

So go ahead and add your card — because I want to display the values I added an Entities Card and added the three Entities I wanted to track. You can do this all in the visual editor.

To add the additional styling, switch to the Code Editor with the link ‘Show Code Editor’ at the lower left of the visual editor. You now see the YAML definition of the card. After each entity node, you can now add a card-mod node to add your custom styling. For example:

type: entities
entities:
  - entity: sensor.moresense_ms05_hetadres_co2
    card_mod:
      style: >
        :host { color: {% set ppm =
        states('sensor.moresense_ms05_hetadres_co2')|int %}
                    {% if ppm < 1000 %}
                    green
                    {% elif ppm < 1200 %}
                    orange
                    {% else %}
                    red
                    {% endif %}
                    ; }
  - entity: sensor.moresense_ms05_hetadres_humidity
    card_mod:
      style: >
        :host { color: {% set rh =
        states('sensor.moresense_ms05_hetadres_humidity')|int %} {% if rh < 25
        %} orange {% elif rh < 75 %} green {% else %} red {% endif %} ; }
  - sensor.moresense_ms05_hetadres_temperature

With the card_mod and style sub-node we define the CSS style to add. I did not know the :host selector, but it points to the container that the style is included in -- so basically the container for the entity display. Everything between {% and %} is code. With the set command I set the current value in a variable, which I can then compare to the limits I have set in a series of if / elif / else statements. (I don't have conditional formatting on temperature, because that's kept constant by the thermostat, it's not really that interesting.)

I have not had reason to work with string values yet, but it will follow a similar pattern.

Crossposted from my blog. Comment here or at the original post.