Change color of text based on state value

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

11 Likes