Card_Mod Coloring of icon and value only

Configuration Frontend
1

Hi all,

I have recently started with Home Assistant, switching over from OpenHAB. I am using card_mod to structure/color my dashboard entries. However, I struggle with one particular requirement. For my temperature sensors I would like to color the icon (which is easy via --card-mod-icon-color) and the value based on different values. The name however should remain in standard color. I have so far only managed to color icon and name (incl. value).

Here is the code I currently use:

- entity: sensor.aussenmodul_temperature.
    name: Temperatur
    icon: mdi:temperature-celsius
    card_mod:
      style: |
        :host {
          color:
          {% if states.sensor.aussenmodul_temperature.state | int <= 3.0 %}
            deepskyblue
          {% elif states.sensor.aussenmodul_temperature.state | int <= 12.0 %}
            darkcyan
          {% elif states.sensor.aussenmodul_temperature.state | int <= 20.0 %}
            olivedrab
          {% elif states.sensor.aussenmodul_temperature.state | int <= 25.0 %}
            goldenrod
          {% elif states.sensor.aussenmodul_temperature.state | int <= 30.0 %}
            peru
          {% elif states.sensor.aussenmodul_temperature.state | int > 30.0 %}
            coral
          {% endif %}
          ;
          --card-mod-icon-color:
          {% if states.sensor.aussenmodul_temperature.state | int <= 3.0 %}
            deepskyblue
          {% elif states.sensor.aussenmodul_temperature.state | int <= 12.0 %}
            darkcyan
          {% elif states.sensor.aussenmodul_temperature.state | int <= 20.0 %}
            olivedrab
          {% elif states.sensor.aussenmodul_temperature.state | int <= 25.0 %}
            goldenrod
          {% elif states.sensor.aussenmodul_temperature.state | int <= 30.0 %}
            peru
          {% elif states.sensor.aussenmodul_temperature.state | int > 30.0 %}
            coral
          {% endif %}
          ;
        }

What am I doing wrong or do I need to do differently? Happy for any help.

1 Like
2
  1. huge card-mod thread → 1st post → link at the bottom → styling Entities card.
  2. Suggest to ask card-mod questions in that thread. Keeping Community tidy, keeping solutions in 1 place, attracting more card-mod users, getting answers faster.
3

Add this

–icon-size: 50px;
–card-primary-font-size: 18px;
–primary-text-color: white;
–secondary-text-color: white;
–card-secondary-font-size: 16px;
–box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}

4

This info seems to be misplaced as it is unrelated to the question.