Struggling with card_mod not changing icon colour / color when templating

Configuration Frontend
1

I’m not sure where I’m going wrong of if this is a bug. Using this code:

type: entity
entity: sensor.spare_power_from_powerwall
name: Excess Power
card_mod:
  style: |-
    ha-card {
      --primary-text-color: black;
      --secondary-text-color: black;
      --ha-card-background: {{ 'red' if ((states('sensor.spare_power_from_powerwall')|float) == 0)else 'green'}};
      --card-mod-icon: {{ 'mdi:battery-low' if ((states('sensor.spare_power_from_powerwall')|float) == 0)else 'mdi:battery-high'}};
      --card-mod-icon-color: black;
      color: black;
    }

I get the expected displayed card on my PC but when using the iPhone app or Android app the icon is blue and not black (as it is on the PC).

If I use this code:

type: entity
entity: sensor.spare_power_from_powerwall
name: Excess Power
card_mod:
  style: |-
    ha-card {
      --primary-text-color: black;
      --secondary-text-color: black;
      --ha-card-background: green;
      --card-mod-icon: mdi:battery-high;
      --card-mod-icon-color: black;
      color: black;
    }

Everything is displayed correctly. Anytime I introduce a template it always shows the icon as blue - the template behaves correctly! Any ideas??

2

Probably because your templates are wrong.
Try something like:

{% if ... %}
  css_prop: xxx;
{% else %}
  css_prop: yyy;
{% endif %}

… and keep in mind current issues regarding --card-mod-icon & --card-mod-icon-color (see github).

3

Not sure what card you’re using this is an example from my mushroom template card:

            icon_color: |
              {% if is_state('climate.john_s_device', 'cool') %}
              blue
              {% else %}
              red
              {% endif %}
            icon: |
              {% if is_state('climate.john_s_device', 'cool') %}
              mdi:fan-chevron-down
              {% else %}
              mdi:fan-chevron-up
              {% endif %}

You have to see if the card your using you are allowed to ‘template’. You can try it the most that’ll happen is it won’t work but this is the idea.

4

The initial question was regarding card-mod which supports jinjia

1 Like
5

Hi mind sharing the source on the issue?

6

Goto card-mod repo, they are all there.

7

Hi didn’t find any related to icon-color in “issues”

8
9

Apologies, you are right. For some reason only last week I witness the issue myself on my config. The card-mod-icon-color shows up as the default theme color instaed to the one specified. The weird thing is that if I go into the grid card configurator I could see that the colors are correct as specified, but when I go back to lovelace it went back to the theme default color.