Card-mod --ha-icon-color: 'red' not working

[josephny (Joseph)]

I am pulling my hair out troubleshooting this and keep making the card simpler and simpler and still can’t get it to work.

Why doesn’t the icon show up in red with this code:

type: entities
entities:
  - entity: sensor.371_1st_floor_temperature
    card-mod: |
      --ha-icon-color: 'red'

I tried red without the single quotes also.

[complex1 (Frank)]

What if you try this:

type: entities
entities:
  - entity: sensor.371_1st_floor_temperature
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: red
        }  

[josephny (Joseph)]

@complex1

type: entities
entities:
  - entity: sensor.371_1st_floor_temperature
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: red
        }  

Yes, that works:

This code works also:

type: entities
entities:
  - entity: sensor.371_1st_floor_temperature
    variables:
      temperature_entity: "{{ entity }}"


card_mod:
    style: |
      :host {
        --card-mod-icon: mdi:bed;
        --card-mod-icon-color: red
      }
      ha-card {
        color: red
      }  

Yielding:

But I can’t figure out how to take it to the next step with conditions, such as this (which does not work):

type: entities
entities:
  - entity: sensor.371_1st_floor_temperature
    variables:
      temperature_entity: '{{ entity }}'
card_mod:
  style: |
    :host {
      --card-mod-icon: mdi:bed;
      --card-mod-icon-color:	  
          {% if states(sensor.371_1st_floor_temperature) | int <= 30 %} 
          blue
          {% elif states(sensor.371_1st_floor_temperature) | int <= 40 %}
          green
          {% elif states(sensor.371_1st_floor_temperature) | int <= 50 %}
          yellow
          {% elif states(sensor.371_1st_floor_temperature) | int <= 60 %}
          orange
          {% elif states(sensor.371_1st_floor_temperature) | int <= 70 %}
          red
          {% endif %}
    }
    ha-card {
      color: red
    }

   

Or

[complex1 (Frank)]

type: entities
entities:
  - entity: sensor.371_1st_floor_temperature
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:bed;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 30 %}
            blue
          {% elif states(config.entity) | int <= 40 %}
            green
          {% elif states(config.entity) | int <= 50 %}
            yellow
          {% elif states(config.entity) | int <= 60 %}
            orange
          {% elif states(config.entity) | int <= 70 %}
            red
          {% endif %}
        }
        ha-card {
          color: red
        }

[Ildar_Gabdullin]

@complex1

entities:
  - entity: sensor.371_1st_floor_temperature
    card_mod:
      style: |
        :host {
          ...
        }
        ha-card {
          ...
        }

It has no sense to use ha-card here.

@josephny

am pulling my hair

… or you may stop guessing, read Docs and ask a question in the dedicated card-mod thread instead of cluttering the forum.

[josephny (Joseph)]

I did read a lot of the docs, but they are not easy to follow.

I am asking questions, and am grateful for the help.

I did not know my questions were cluttering.

The help has worked – thank you all so much.

Of course, the code is a bear to work with because of the repeating code, but I am happy with the progress. And, I would have liked a more graphical representation of the temperature, perhaps in the form of a horizontal bar, but for now this is a huge improvement.

Thank you!

type: entities
entities:
  - entity: sensor.371_1st_floor_temperature
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.pirateweather_temperature
    name: Outdoors
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.76_thr316_1_water_temperature
    name: 76 Water
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.sonoff_1001dabf2f_temperature
    name: 630 Water
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.sonoff_100139392c_temperature
    name: White Water
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.sonoff_1001393418_temperature
    name: Purple Water
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.125_1st_floor_temperature
    name: 125 1st Fl
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.125_2nd_floor_temperature
    name: 125 2nd Fl
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.sonoff_100182a1cc_temperature
    name: 125 Attic
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.371_1st_floor_temperature
    name: 371 1st Fl
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.371_2nd_floor_temperature
    name: 371 2nd Fl
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.371_hydronic_temperature
    name: 371 Hydronic
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.carmine_temperature
    name: Carmine
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.sonoff_1001829f81_temperature
    name: Eddie
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.76_temperature
    name: 76
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.sonoff_10013932b1_temperature
    name: 629
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.630_temperature
    name: 630
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.1st_floor_room_temperature
    name: 255 1st Fl
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.2nd_floor_east_room_temperature
    name: 255 2nd Fl East
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.2nd_floor_west_room_temperature
    name: 255 2nd Fl West
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.3rd_floor_room_temperature
    name: 255 3rd Fl
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }
  
  - entity: sensor.well_ecobee_temperature
    name: Well
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }
  
  - entity: sensor.sonoff_1001392bce_temperature
    name: White
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

  - entity: sensor.sonoff_1001dabe7c_temperature
    name: Blue THR316
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }
  
  - entity: sensor.sonoff_100139390d_temperature
    name: Blue Closet
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }
 
  - entity: sensor.sonoff_1001829f54_temperature
    name: Green
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }
  
  - entity: sensor.sonoff_1001392bd9_temperature
    name: Purple THR316
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }
  
  - entity: sensor.shop_temperature
    name: Shop
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:water;
          --card-mod-icon-color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};
          color:
          {% if states(config.entity) | int <= 32 %}
            blue
          {% elif states(config.entity) | int <= 48 %}
            aqua
          {% elif states(config.entity) | int <= 62 %}
            burlywood
          {% elif states(config.entity) | int <= 70 %}
            orange
          {%- else %}
            red
          {% endif %};        
        }

[Ildar_Gabdullin]

@josephny

am asking questions, and am grateful for the help.

Have no any intention to offend you.
My suggestions are:

1. If your you wish to solve some issue and you sure that you need to use some custom card or card-mod - go to a corr. dedicated thread. Almost every popular custom card (& car-mod as well although it is not a card) has its own dedicated thread. Asking questions there will attract more users, solutions will be in one place, you will share them with others.
2. As for card-mod particularly: some tutorial examples are posted in the accumulative post: go to card-mod thread → 1st post → link at the bottom → here links to useful examples are provided. These examples may be a good starting point. Ofc you are welcome to ask questions anyway - but is is better to see it in one place.
3. As for repeated code - please check these threads: here, also here starting from some post.

There are plenty ways of reusing a code, depends on a particular case.
Check this example:

type: entities
entities:
  - entity: input_number.test_level_1
    name: xxx
    <<: &ref_settings
      icon: mdi:water
      card_mod:
        style: |
          :host {
            {% if states(config.entity) | int <= 32 %}
              {% set COLOR = 'blue' %}
            {% elif states(config.entity) | int <= 48 %}
              {% set COLOR = 'aqua' %}
            {% elif states(config.entity) | int <= 62 %}
              {% set COLOR = 'burlywood' %}
            {% elif states(config.entity) | int <= 70 %}
              {% set COLOR = 'orange' %}
            {%- else %}
              {% set COLOR = 'red' %}
            {% endif %}
            --card-mod-icon-color: {{COLOR}};
            color: {{COLOR}};
          }
  - entity: input_number.test_level_2
    name: xxx
    <<: *ref_settings
  - entity: input_number.test_level_3
    name: xxx
    <<: *ref_settings
  - entity: input_number.test_level_4
    name: xxx
    <<: *ref_settings
  - entity: input_number.test_level_5
    name: xxx
    <<: *ref_settings

Yaml-anchors is a way to reduce a code. But it works in yaml-mode only, not in UI-driven-dashboards.

Another possible way is using card-mod-themes (discussed here) - particularly “classes”.
You may define a “class” in a theme:

  card-mod-row-yaml: |
    .: |
      :host(.class-row-water) {
        {% if states(config.entity) | int <= 32 %}
          ....
        {% endif %}
        --card-mod-icon-color: {{COLOR}};
        color: {{COLOR}};
      }

and then use it wherever you need:

type: entities
entities:
  - entity: input_number.test_level_1
    name: xxx
    <<: &ref_settings
      icon: mdi:water
      card_mod:
        class: class-row-water
  - entity: input_number.test_level_2
    name: xxx
    <<: *ref_settings
  - entity: input_number.test_level_3
    name: xxx
    <<: *ref_settings

[josephny (Joseph)]

Thank you so very much!

I’ve made great progress and am learning (albeit slowly).

I have this much improved card:

And used your code that utilizes:

<<: *ref_settings

I didn’t realize that using this technique actually inserts the referenced code, so the card’s code now looks like like below.

One of the benefits I thought I was getting of using something that repeatedly references code is that if I wanted to make a change I could make it in 1 place and it would apply to all entities. Am I misunderstanding?

type: entities
card_mod:
  style: |
    :host {
      font-size: 20px;
      height: 10px;
    }
    .card-content div {
          margin-top: 0px !important;
          margin-bottom: 0px  !important;
        }
entities:
  - entity: sensor.pirateweather_temperature
    name: Outdoors
    icon: mdi:land-fields
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.76_thr316_1_water_temperature
    name: 76 Water
    icon: mdi:water
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.sonoff_1001dabf2f_temperature
    name: 630 Water
    icon: mdi:water
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.sonoff_100139392c_temperature
    name: White Water
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
    icon: mdi:water
  - entity: sensor.sonoff_1001393418_temperature
    name: Purple Water
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
    icon: mdi:water
  - entity: sensor.well_ecobee_temperature
    name: Well
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.125_1st_floor_temperature
    name: 125 1st Fl
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.125_2nd_floor_temperature
    name: 125 2nd Fl
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.sonoff_100182a1cc_temperature
    name: 125 Attic
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.371_1st_floor_temperature
    name: 371 1st Fl
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.371_2nd_floor_temperature
    name: 371 2nd Fl
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.371_hydronic_temperature
    name: 371 Hydronic
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.carmine_temperature
    name: 371 Carmine
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.sonoff_1001829f81_temperature
    name: 371 Eddie
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.76_temperature
    name: 76
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.sonoff_10013932b1_temperature
    name: 629
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.630_temperature
    name: 630
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.1st_floor_room_temperature
    name: 255 1st Fl
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.2nd_floor_east_room_temperature
    name: 255 2nd Fl East
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.2nd_floor_west_room_temperature
    name: 255 2nd Fl West
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.3rd_floor_room_temperature
    name: 255 3rd Fl
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.sonoff_1001392bce_temperature
    name: White
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.sonoff_1001dabe7c_temperature
    name: Blue THR316
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.sonoff_100139390d_temperature
    name: Blue Closet
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.sonoff_1001829f54_temperature
    name: Green
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.sonoff_1001392bd9_temperature
    name: Purple THR316
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }
  - entity: sensor.shop_temperature
    name: Shop
    card_mod:
      style: |
        :host {
          {% if states(config.entity) | int <= 32 %}
            {% set COLOR = 'blue' %}
          {% elif states(config.entity) | int <= 48 %}
            {% set COLOR = 'aqua' %}
          {% elif states(config.entity) | int <= 62 %}
            {% set COLOR = 'burlywood' %}
          {% elif states(config.entity) | int <= 70 %}
            {% set COLOR = 'orange' %}
          {%- else %}
            {% set COLOR = 'red' %}
          {% endif %}
          --card-mod-icon-color: {{COLOR}};
          color: {{COLOR}};
        }

[Ildar_Gabdullin]

A small test:

1. Create a new card:

type: entities
entities:
  - &ref_row
    entity: sun.sun
    name: xxx
  - *ref_row
  - *ref_row

2. Save.
3. Reopen.
4. It will have

type: entities
entities:
  - entity: sun.sun
    name: xxx
  - entity: sun.sun
    name: xxx
  - entity: sun.sun
    name: xxx

You are using a dashboard in a storage mode. You may add/edit/delete view or cards in UI.
When you open a card and edit it’s yaml code - on saving the yaml code is converted to json.
When you open a card - the json is back converted to yaml.
Means - your comments & anchors are lost.

The yaml-anchors are used mainly in yaml-mode - i.e. all dashboards/views/cards are controlled by editing yaml files in some text editor (since I am using HA in docker - I am using VSCode to edit files).
You still may use anchors in UI - only to create a card with 100 same rows; but after reopening you will see a code, not anchors.

So, grow up - and start using yaml-mode))) Use the storage mode for testing & designing only.
Note: UI-mode has many adepts anyway.

[josephny (Joseph)]

Thank you again for the education.

I put on my big-boy pants on, searched and found the following, and then immediately soiled said pants:

Attempting to switch to YAML mode and lovelace_gen - Configuration / Frontend - Home Assistant Community (home-assistant.io)

I have no idea what the implications are of switching to yaml-mode.

[Ildar_Gabdullin]

The link you provided is related to Lovelace_gen which is a custom tool which you will may need in a future.
But dealing with Lovelace_gen is absolutely not needed for users who chose the Way of YAML Dashboards.

[josephny (Joseph)]

Would you mind sharing a link for beginners who would like to go the YAML Way?

[Ildar_Gabdullin]

In general it is here:

Multiple Dashboards