🔹 Card-mod - Add css styles to any lovelace card

[DarkNeroXIII]

Hi,
i hope this is the right place for this. I do have a little problem: i set up some colored icons on my dashboard using card-mod. On the browser this is working more or less ok (sometimes the color is not showing, sometimes the code gets changed by itself and i don’t know why) but that’s not the thing.

Those colors are working on the browser on different PC’s but in my companion app those colored icons not showing, instead they are showing as standard blue icons and the seems not to get the configuration.

My config or code does nothing really exiting. Just coloring the icons on temperature change (this works)

I already googled this issue, did not find a solution. I am pretty new to Home Assistant in general so any advise would be appreciated! Let me know if you need more info, pictures or whatever

[Ildar_Gabdullin]

@DarkNeroXIII

i set up some colored icons on my dashboard using card-mod. On the browser this is working more or less ok (sometimes the color is not showing, sometimes the code gets changed by itself and i don’t know why) but that’s not the thing.

Post a SHORT properly formatted code demonstrating the issue.

[DarkNeroXIII]

Thanks for your answer!
This is one part which stays always the same and does not get changed by itself:

type: entities
entities:
  - entity: switch.wohnzimmer_licht_schalter
    card_mod:
      style: |
        :host {
        {% if is_state('switch.wohnzimmer_licht_schalter' , 'on') %}
        --card-mod-icon-color: green;
        {% elif is_state('switch.wohnzimmer_licht_schalter' , 'off') %}
        --card-mod-icon-color: red;
        {% endif %}
        }

This one here is an example of one that gets changed:
How it should look:

  - entity: sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung
    card_mod:
      style: |
        :host {
        {% if states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') | float(0) > 75 %}
          --card-mod-icon-color: red; --card-mod-icon: mdi:alert-decagram;
        {% elif states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') | float(0) > 50 %}
          --card-mod-icon-color: yellow;
        {% elif states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') | float(0) <= 50 %}
          --card-mod-icon-color: green;
        {% endif %}
          }

How it gets changed:

  - entity: sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung
    card_mod:
      style: >
        :host {

        {% if
        states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') |
        float(0) > 75 %}
          --card-mod-icon-color: red; --card-mod-icon: mdi:alert-decagram;
        {% elif
        states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') |
        float(0) > 50 %}
          --card-mod-icon-color: yellow;
        {% elif
        states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') |
        float(0) <= 50 %}
          --card-mod-icon-color: green;
        {% endif %}
          }

I am using Dahsboard → Edit → Edit Card → Code-Editor → Paste Code

[Ildar_Gabdullin]

Guess this was your issue (better to ask in community first before registering an issue).
First, some general remarks:

1. You can use “config.entity” variable here to make a code better:

- entity: sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung
    card_mod:
      style: |
        :host {
        {% if states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') ...

→

- entity: sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung
    card_mod:
      style: |
        :host {
        {% if states(config.entity) ...

2. You got

if ...
...
elif ...
...

w/o a default “else” path - which in some cases may give you bad results.

As for “How it gets changed” - UI editor processes long lines in such way.
In your case you have “|” replaced by “>”.
Read this.
In my experience, this conversion cannot break card-mod code - i.e. I never observed an issue “code was working OK before conversion → conversion → code stopped working”. If you see this - then most probably your code is wrong.

BTW, I never use “–card-mod-icon-color” variable & prefer more robust ways.

[DarkNeroXIII]

Thank you!

I see, i closed that one. I opened it before i knew there was a forum dedicated to this.
Anyways: yes my code is pretty bad. your advise did help me. So now i changed it into your suggestion with config.entity, that shortens the code and it does not “break” anymore.

Do you have an alternative to the variable “–card-mod-icon-color”?

My initial problem did not solve with adjusting the code.
Still in browser view the icons are colored and working (now better than before) but in the companion app they still do not change.
Android Phone, latest Android Version, latest App Version (not beta), no Energy Saving for App and Full Access granted

[Ildar_Gabdullin]

@DarkNeroXIII

–card-mod-icon-color

There are some cases when this variable may not work, see a related issue on Github (may be the issue is already closed, have not tracked it).
Alternatives:

1. For Entities card as an example: use simple “colorize an icon” ways - see 1st post → link at the bottom → styles for Entities card.
2. For an entity of some domains (incl. “switch”) - check here, define a corr. variable (either for a whole card to affect all entities of same domain or for a particular entity):
   
   

type: glance
entities:
  - entity: switch.test_switch
  - entity: switch.test_switch_2
state_color: true
card_mod:
  style: |
    ha-card {
      --state-switch-on-color: red;
      --state-switch-off-color: cyan;
    }

[DarkNeroXIII]

Thanks, that was very helpful!

Now only the problem with the companion app persists and i have no idea why.

When i open the App all symbols appear as they are not edited. When i change something in the browser then i see an “reload” button on the bottom of the app. I press it → the colors and icons change as they should be → i close the app → open it again → all colors and icons again in default mode

[Ildar_Gabdullin]

@DarkNeroXIII

i close the app → open it again → all colors and icons again in default mode

Check with a simple Entities card & a simple card-mod style for colorized icon & come back with results (post a code with which you tested).

[DarkNeroXIII]

This does not work at all. Not even in the preview panel.
When i create an entity card i just get error message that card_mod is not supported

[Ildar_Gabdullin]

See no issues with my code in Win10+Chrome and in iOS Companion app (iOS 12.x).

[DarkNeroXIII]

i don’t know either why it is not working. I ensured the code is the exact same just different entities. I also switched to another computer, opened in friefox, chrome and even edge Win10 + Win11. No difference the code seems not to work.

Interesting is if i do this:

type: glance
entities:
  - entity: switch.kueche_licht_schalter
    icon: mdi:record

The icon does appear also in the app. So it seems to be a problem (as you already said) of the --card-mod-icon variable

Problem is i have to little knowledge about this that i can improve my code as i already tried things like this for example:

    card_mod:
      style: |
        :host {
        {% if is_state(config.entity , 'on') %}
        --icon-color: green;

edit
i shit you not, when i copied your code from above right now it worked, it was EXACTLY the same as i wrote down

BUT: in the companion app the icons are default blue

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

BTW, I never use “–card-mod-icon-color” variable & prefer more robust ways.

wait, I never read that before… are you serious? what is not robust in your experience? I must have a look if that could speedup my config maybe.

tbh, Ive never met a case where this does not work, but, given the core support for those state colors, it does sound very interesting, even more ‘supported in core’ for that matter.

thing is, there are quite a few domains Not supported in state color theming, sensor being one of the main domains ofc, so we can only use --card-mod-icon(-color).

# pm25_color:
style: |
  :host {
    {% set air = states(config.entity)|float(-5) %}
    --card-mod-icon-color:
      {% if air < 35 %} var(--ok-color)
      {% elif air < 85 %} orange
      {% elif air >= 85 %} var(--alert-color)
      {% else %} var(--no-power-color)
      {% endif %};
  }

is my main way of modding the icon-color and this works domain independent., even overrules device_class nicely without !important

# active_icon:
# replacing the mdi:play/stop now set by the device_class: running
style: |
  :host {
    --card-mod-icon:
        mdi:{{'checkbox-marked-circle' if is_state(config.entity,'on') else
              'radiobox-blank'}};
  }

what I am trying to say: looking for a spot this is not robust, so I can test that seriously

and suppose we should not pursue to use the --paper-item-icon-color variable anymore, so this would be the ‘default’ replacement for what I have above:

    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: {{'red' if is_state(config.entity,'below_horizon') else 'green'}};
            }   

which to me seems more fragile and complex, and most of all, loses the elegance of using both --card-mod-icon and --card-mod-icon-color on the same element in the dom path

---

(ofc except the case I posted about yesterday…)

[Ildar_Gabdullin]

@DarkNeroXIII

EXACTLY the same

[Ildar_Gabdullin]

@Mariusthvdb

tbh, Ive never met a case where this does not work,

Well, I met such cases; and at some point it was fixed, then broke, then probably again fixed - so I preferred not to depend on these changes. Ofc in SOME cases I have to track down changes in DOM (which happen sometimes) - but for me it not a big deal due to a re-usable code (fix in 1 place, use in many).

@Mariusthvdb

thing is, there are quite a few domains Not supported in state color theming, sensor being one of the main domains ofc, so we can only use --card-mod-icon(-color).

Or a “traditional” DOM-based way (see above).

@Mariusthvdb

we should not pursue to use the --paper-item-icon-color variable anymore

Agree, this variable may become silently outdated one day.

[DarkNeroXIII]

i see now where my mistake was. Anyways, the initial problem does not solve with this.

The mobile app does not get the colors and changed icons when opened. But for example when i switch to map and then back to dashboard it gets reloaded and the colors and icons appear.

I have no clue why. Already reinstalled the app, checked all the permissions twice…

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

for me it not a big deal due to a re-usable code (fix in 1 place, use in many).

yes, same here, I have all mods I used more than once in a dedicated folder and !include those
(remember we also had the option to add them in secrets and import via !secret, but that was dismissed for just reasons)

[Ildar_Gabdullin]

@DarkNeroXIII

The mobile app does not get the colors and changed icons when opened

See no issues with a Companion App on a very old iPhone 5S (iOS 12.x). Probably a particular Android version’s issue?

[Ildar_Gabdullin]

@Mariusthvdb

in a dedicated folder and !include those
(remember we also had the option to add them in secrets and import via !secret, but that was dismissed for just reasons)

I myself proposed to use “secrets” for card-mod here in this thread - and soon started convincing people not to do it & use “include” ).

[DarkNeroXIII]

I just did check if that’s maybe the problem: different android phone, different android version exact same issue.

I don’t get it. I am about to give up on this and use the default colors without changing anything. Just does not make any sense

[Ildar_Gabdullin]

Just in case: see if you have card-mod properly installed, purge local frontend cache.
Btw, for me the iOS companion app even on a “not ancient yet” iPhone 12 is rather buggy & glitchy, so I do not consider it as a reliable client.