Change color of text based on state value

Configuration
#1

Hello All, I was wondering if anyone knows of a tutorial on how to make the text change color in lovelace depending on the value.

I use a pollen sensor and there is a set of ranges. I would like each set to be a different color. This is what the ranges are:
0.0 - 2.4 Low
2.5 - 4.8 Low/Medium
4.9 - 7.2 Medium
7.3 - 9.6 Medium/High
9.7 - 12.0 High

I have seen a few examples online for like on or off but I can’t seem to find one that shows multiple states with numbers like this.

Thank you in advance for your time.

1 Like
#2

hello,
i think u need hacks integration:
https://github.com/thomasloven/lovelace-card-mod
to add css style to your lovelace.
then learn how to write your css-style

#3

Thanks but I don’t see where it tells how to define the color change. Am I missing something?

I want it to display one color if it’s 0.0-2.4, a different color if it’s 2.5-4.8 etc.

#4

(this is an exemple for a badge)

style: |
   :host { 
   color: {% if is_state('switch.light', 'on') %} yellow {% else %} grey {% endif %};
    --label-badge-red: {% if is_state('switch.light', 'on') %} yellow {% else %} grey {% endif %};
   }

something that look like that .
to help you:

and
https://www.w3schools.com/css/

2 Likes
#5

It took a while but I finally got it in case anyone stumbles across this post wanting to do the same thing. I used card-mod.

type: entities
entities:
  - entity: sensor.allergy_index_today
    card_mod:
      style: |
        :host {
          color:
            {% if states(config.entity) | int <= 2.4 %} 
              green
            {% elif states(config.entity) | int <= 4.8 %}
              greenyellow
            {% elif states(config.entity) | int <= 7.2 %}
              yellow
            {% elif states(config.entity) | int <= 9.6 %}
              orange
            {% elif states(config.entity) | int <= 12 %}
              red
            {% endif %}
            ;
        }
  - entity: sensor.allergy_index_forecasted_average
    card_mod:
      style: |
        :host {
          color:
            {% if states(config.entity) | int <= 2.4 %} 
              green
            {% elif states(config.entity) | int <= 4.8 %}
              greenyellow
            {% elif states(config.entity) | int <= 7.2 %}
              yellow
            {% elif states(config.entity) | int <= 9.6 %}
              orange
            {% elif states(config.entity) | int <= 12 %}
              red
            {% endif %}
            ;
        }
  - entity: sensor.allergy_index_tomorrow
    card_mod:
      style: |
        :host {
          color:
            {% if states(config.entity) | int <= 2.4 %} 
              green
            {% elif states(config.entity) | int <= 4.8 %}
              greenyellow
            {% elif states(config.entity) | int <= 7.2 %}
              yellow
            {% elif states(config.entity) | int <= 9.6 %}
              orange
            {% elif states(config.entity) | int <= 12 %}
              red
            {% endif %}
            ;
        }
  - entity: sensor.cold_flu_index_today
    card_mod:
      style: |
        :host {
          color:
            {% if states(config.entity) | int <= 2.4 %} 
              green
            {% elif states(config.entity) | int <= 4.8 %}
              greenyellow
            {% elif states(config.entity) | int <= 7.2 %}
              yellow
            {% elif states(config.entity) | int <= 9.6 %}
              orange
            {% elif states(config.entity) | int <= 12 %}
              red
            {% endif %}
            ;
        }
  - entity: sensor.cold_flu_forecasted_average
    card_mod:
      style: |
        :host {
          color:
            {% if states(config.entity) | int <= 2.4 %} 
              green
            {% elif states(config.entity) | int <= 4.8 %}
              greenyellow
            {% elif states(config.entity) | int <= 7.2 %}
              yellow
            {% elif states(config.entity) | int <= 9.6 %}
              orange
            {% elif states(config.entity) | int <= 12 %}
              red
            {% endif %}
            ;
        }
  - entity: sensor.asthma_index_today
    card_mod:
      style: |
        :host {
          color:
            {% if states(config.entity) | int <= 2.4 %} 
              green
            {% elif states(config.entity) | int <= 4.8 %}
              greenyellow
            {% elif states(config.entity) | int <= 7.2 %}
              yellow
            {% elif states(config.entity) | int <= 9.6 %}
              orange
            {% elif states(config.entity) | int <= 12 %}
              red
            {% endif %}
            ;
        }
  - entity: sensor.asthma_index_forecasted_average
    card_mod:
      style: |
        :host {
          color:
            {% if states(config.entity) | int <= 2.4 %} 
              green
            {% elif states(config.entity) | int <= 4.8 %}
              greenyellow
            {% elif states(config.entity) | int <= 7.2 %}
              yellow
            {% elif states(config.entity) | int <= 9.6 %}
              orange
            {% elif states(config.entity) | int <= 12 %}
              red
            {% endif %}
            ;
        }
  - entity: sensor.asthma_index_tomorrow
    card_mod:
      style: |
        :host {
          color:
            {% if states(config.entity) | int <= 2.4 %} 
              green
            {% elif states(config.entity) | int <= 4.8 %}
              greenyellow
            {% elif states(config.entity) | int <= 7.2 %}
              yellow
            {% elif states(config.entity) | int <= 9.6 %}
              orange
            {% elif states(config.entity) | int <= 12 %}
              red
            {% endif %}
            ;
        }
10 Likes
#6

Sweet, looking for this mod for my freezer temps…

3 Likes
#7

How could one change only the color of the data/value (not the entity name)? I have looked on the forum and the card-mod documentation but to no avail.

1 Like
#8

Do a search for ‘css color names’. Replace the colors here (green, greenyellow, yellow, orange, red, etc.) with the name of the color you want to use.

#9

Thanks for replying. I had already succesully implemented that strategy but now I’d like to limit the color changes to the data value while fixing the color of this entity’s name. So, does anyone know how to (CSS) select only the entity’s state/number for color change?

#10

lol… when I first found the code to do this it only worked on the data value and I wanted it all to change because it was easier to read (I have a few different sensors in the same entities card). There is a way to do it but I don’t remember exactly. I believe it has to do with changing ‘host’ to something else.

1 Like
#11

Great succes!

Based on this post I managed to do it.

First one is with text name and value both changing color, second only the data value.

       - entity: sensor.waqi_amsterdam
        name: Changing text + data
        card_mod:
          style: |
            :host {
              color:
                {% if states(config.entity) | int <= 50 %} 
                  #e1e1e1
                {% elif states(config.entity) | int <= 100 %}
                  greenyellow
                {% elif states(config.entity) | int <= 150 %}
                  yellow
                {% elif states(config.entity) | int > 150 %}
                  red
                {% endif %}
                ;
            }
      - entity: sensor.waqi_amsterdam
        name: Changing only data 
        card_mod:
          style:
            hui-generic-entity-row:
              $: |
                .text-content:not(.info) {
                  color:
                    {% if states(config.entity) | int <= 50 %} 
                      #e1e1e1
                    {% elif states(config.entity) | int <= 100 %}
                      greenyellow
                    {% elif states(config.entity) | int <= 150 %}
                      yellow
                    {% elif states(config.entity) | int > 150 %}
                      red
                    {% endif %}
                    ;
                }

See:

image

7 Likes
#12

I have an entities card that shows several battery values and I was wondering whether it was possible to have a single style for the card that will change the entity name of the battery under a certain percentage to red

type: entities
card_mod:
  style: |
    .card-header {
      font-size: 18px;
      padding: 2px 15px 2px 15px
    }
entities:
  - type: section
  - entity: sensor.fridge_sensor_battery
    card_mod:
      style: |
        :host {
          color: {% if states(config.entity) | int <= 40 %} red {% endif %};
        }
  - entity: sensor.kitchen_counter_left_motion_sensor_battery
  - entity: sensor.kitchen_counter_right_motion_sensor_battery
  - entity: sensor.kitchen_sink_leak_sensor_battery
  - entity: sensor.dishwasher_leak_sensor_battery
  - entity: sensor.fridge_door_battery
    name: Fridge Door Sensor Battery
  - entity: sensor.fridge_drawer_battery
    name: Fridge Drawer Sensor Battery
  - entity: sensor.freezer_drawer_battery
    name: Freezer Drawer Sensor Battery
title: Batteries
state_color: true

The YAML above outputs this:

image
image744×706 33.3 KB

I’d like to avoid repeating the same code… although for some batteries it might be necessary as they are depleted at different percentages.

1 Like
#13

There might be but I’m not aware of how to do it. Have you tried the battery card in HACS?

1 Like
#14

@scottastrophik - I did but one styling I do to all my cards breaks it and I have not figured a way around it.

type: custom:battery-state-card
title: Battery levels
card_mod:
  style: |
    .card-header {
      font-size: 18px;
      padding: 2px 15px 2px 15px
    }
entities:
  - type: section
  - entity: sensor.fridge_door_battery
  - entity: sensor.fridge_drawer_battery
  - entity: sensor.fridge_sensor_battery

When I add - type: section the card is no longer visible when saved… but after reviewing github again I just found this option:

type: entities
title: Battery levels
card_mod:
  style: |
    .card-header {
      font-size: 18px;
      padding: 2px 15px 2px 15px
    }
show_header_toggle: false
entities:
  - type: section
  - type: custom:battery-state-entity
    entity: sensor.fridge_door_battery
  - type: custom:battery-state-entity
    entity: sensor.fridge_drawer_battery
  - type: custom:battery-state-entity
    entity: sensor.fridge_sensor_battery
  - type: custom:battery-state-entity
    entity: sensor.fridge_door_battery

…and it displays the - type: section without a fuss:

image
image763×408 14.3 KB

Thanks for pointing me back to that card… I had given up on it.

#15

Can anyone help with this icon color issue. I can’t seem to get the icon color to change with the following code:

type: custom:mushroom-entity-card
entity: sensor.tess_battery
tap_action:
  action: navigate
  navigation_path: /lovelace-concept/tesla
fill_container: false
layout: vertical
secondary_info: state
name: Tesla
icon_color: |-
  {% set battery = states('sensor.tess_battery') | int %}
  {% if battery < 0 %}
    red
  {% elif battery < 50 %}
    orange
  {% elif battery < 60 %}
    yellow
  {% else %}
    green
  {% endif %}
card_mod:
  style: |
    ha-card {
      border: 0px;
      margin: 0px 0px 0px 0px;
      -webkit-border-radius: 0px;
      background-color: hsla(0, 0%, 0%, 0);
      text-align: left;
      justify-self: left;
      box-shadow: none;
    }
#16

Hello Martin
I think you just have to change the order of conditions.

 {% if battery < 60 %}
    yellow
  {% elif battery < 50 %}
    orange
  {% elif battery < 1 %}
    red
  {% else %}
    green
  {% endif %}
1 Like
#17

Thanks for the tip - the larger issue was that I was using the Mushroom entity card and not the mushroom template card which allows for templating.

#18

Is it possible to hide the name of card_mod entity card - just to show the value?

#19

So helpful, thank you!

#20

Can anyone tell me why this doesn’t work…

- entity: sensor.allergy_forecast
    icon: mdi:flower
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .text-content:not(.info) {
              color:
                {% if states(config.entity), 'Extreme' %} 
                  red
                {% elif states(config.entity), 'Moderate' %}                 
                  yellow
                {% endif %}
                ;
            }

New-1