Change font and icon color of entities based on template

Configuration Frontend
1

I’m using the below entity card as part of a larger vertical stack to show values and controls related to my HVAC misting system. I basically want to change the font and icon colors of the entities to match the conditions where the mister would be turning on. Current config below, followed by one I tired ot make, but is failing.

Current card config

type: entities
entities:
  - entity: input_boolean.hvac_mist_system
    name: System armed
  - entity: switch.ac_misting_system_zone
    name: Misting System
  - entity: sensor.pirateweather_temperature
    name: Outdoor temp
  - entity: sensor.pirateweather_hourly_summary
    name: Weather
  - entity: sun.sun
title: HVAC Misting System
show_header_toggle: false
state_color: false

image

Attempted config, not working

type: entities
entities:
  - entity: input_boolean.hvac_mist_system
    name: System armed
  - entity: switch.ac_misting_system_zone
    name: Misting System
  - entity: sensor.pirateweather_temperature
    name: Outdoor temp
    state_color: true
    styles:
      card:
        - color: |
            [[[
              if (state < 85) return 'red';
              return 'green';
            ]]]
  - entity: sensor.pirateweather_hourly_summary
    name: Weather
    state_color: true
    styles:
      card:
        - color: |
            [[[
              if (state === 'rain') return 'red';
              return 'green';
            ]]]
  - entity: sun.sun
    state_color: true
    styles:
      card:
        - color: |
            [[[
              if (state === 'above_horizon') return 'green';
              return 'red';
            ]]]
title: HVAC Misting System
show_header_toggle: false

What am I doing wrong here?

2

image
image917×242 9.24 KB

Use this example to adjust your current card.

type: entities
entities:
  - entity: sun.sun
    name: System armed
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color:  {{ 'red' if states('sensor.pirateweather_temperature') | int >= 20 else 'green' }};
                 }
            .info {
              color: orange;
              }
            .state {
              color: lime;
              }

check out this full guide