Entity card – change color based on entity state

Configuration Frontend
1

Hi, I have following entity card, and I would like to change the color of „Now“ entity. If the entity’s state is more than 50%, then green color, if less than 50%, then red color. So, in this case, the number „11%“ should be red.
Thank you

image
image811×202 11 KB

type: custom:mod-card
card:
  type: horizontal-stack
  title: Battery
  cards:
    - type: entities
      entities:
        - entity: sensor.tpj4cjm04k_statement_of_charge_2
          name: Now
          card_mod:
            style:
              hui-generic-entity-row $: |
                state-badge {
                  display: none;
                }
        - entity: sensor.max_baterie_fve_dnes_2
          name: Max today
          card_mod:
            style:
              hui-generic-entity-row $: |
                state-badge {
                  display: none;
                }
      show_header_toggle: false
      card_mod:
        style:
          .: |
            #states > * {
              margin: 2px -10px !important;
              margin-left: -25px !important;
              font-size: 10.5px;
              --mdc-icon-size: 18px; 
            }
2

Suggest to ask similar questions in the dedicated card-mod thread.
You will probably attract more people to help / to see the solution.

3

You might try two conditional cards, one if the state is > 50%m and one if it is < 51%. Since they can’t both be true you will only ever see one, and the colour will appear to change.

For example:

      - type: conditional
        conditions:
          - condition: state
            entity: binary_sensor.window_open
            state: 'off'
        card:
          type: tile
          entity: binary_sensor.window_open
          name: Windows
          tap_action:
            action: none
          icon_tap_action:
            action: none
      - type: conditional
        conditions:
          - condition: state
            entity: binary_sensor.window_open
            state: 'on'
        card:
          type: tile
          entity: binary_sensor.window_open
          name: Window
          color: red
          tap_action:
            action: none
          icon_tap_action:
            action: none
          card_mod:
            style: |
              ha-card { 
                {% if is_state('binary_sensor.window_open', 'on') %}
                --ha-card-background: #6c1919;
              {% endif %} 
                }
4

Here is the solution. Thank to LiQuid_cOOled.

type: custom:mod-card
card:
  type: horizontal-stack
  title: Battery
  cards:
    - type: entities
      entities:
        - entity: sensor.tpj4cjm04k_statement_of_charge_2
          name: Now
          card_mod:
            style:
              hui-generic-entity-row $: |
                state-badge {
                  display: none;
                  }
                .state {
                 color: {{'green' if states(config.entity) | int >= 50 else 'red'  }}
                  }
2 Likes