--card-mod-icon-color does not work

comet424 commented 2 years ago

My Home Assistant version: 0.XX.X core-2022.3.5 supervisor-2022.03.5 Home Assistant OS 7.5

My lovelace configuration method (GUI or yaml): yaml

What I am doing: trying to get icons to switch color like it used to work with the last version of home assistant also did a cache browsing delete didnt work

also doesnt work in Chrome or Edge both need refresh to work

What I expected to happen: the icon should change color when you toggle the switch

What happened instead:

click the toggle switch it doesnt change color anymore... worked in the last version of the plugin or Home assistant i cant remember hit refresh then it shows the new color..

  - entity: sensor.b_hot_water_tank_state
    name: Hot Water Tank
    icon: mdi:water
    secondary_info: last-updated
    card_mod: null
    style: |
      :host {
      --card-mod-icon-color: 
      {% if states(config.entity) == 'on' %} 
        yellow
      {% elif states(config.entity) == 'off' %}
        red
      {% else %}
        blue
      {% endif %}
      ;
      } 

# End of code

Error messages from the browser console:

dont know how to get that

By putting an X in the boxes ([]) below, I indicate that I:

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

ildar170975 commented 2 years ago

Confirm the issue.

Probably this issue is related only to --card-mod-icon-color and the issue should be renamed to "--card-mod-icon-color does not work". Also check this: https://github.com/thomasloven/lovelace-card-mod/issues/176

comet424 commented 2 years ago

ok ill rename it..

ya that link is old from feb.. my issue was working a week ago.. till i did hacs and home assistant updates the other day

comet424 commented 2 years ago

card color still broken with version 3.4.1 figured latest update fix it.. but nope

you gotta hit F5 to refresh the page to see the color change for some reason.. whats changing Web browsers?

comet424 commented 2 years ago

so the bug is in the "icon:"

it works fine if you dont use a custom icon

so you cant use

icon:

if you use the default icon it can change the color... toggled.

also if i hit F5 to refresh it will toggle the screen icon colors like from Green to White back and forth with the refreshs

ildar170975 commented 2 years ago

it works fine if you dont use a custom icon

Even with a default icon a color is not changed.

  - type: entities
    title: Problem 128
    entities:
      - entity: input_boolean.test_boolean
        card_mod:
          style: |
            :host {
                {% if is_state(config.entity,'on') %}
                --card-mod-icon: mdi:shield-off-outline;
                --card-mod-icon-color: red;
                {% else %}
                --card-mod-icon: mdi:shield-remove-outline;
                --card-mod-icon-color: cyan;
                {% endif %}
            }

Color is changed after F5:

comet424 commented 2 years ago

ah ok ya its messed.. must been one of the home assistant updates that broke it.. but so far no fix yet ): so sucks cuz i use toggle switchs but you forget whats on or off lol
but button card that works

i like that u do a change icon when it toggles need to do that myself. i dont understand the boolean etc or the helpers.. always learning

comet424 commented 2 years ago

anyone know if there is a fix yet or if the card mod is a dead intergrations, slowly switching away from card mod and just stick with regular green color.. and using button-card... but i did like the card mod so i had color for on off and unavailable but think guy is very busy or maybe no fix.. doesnt work in sfari, IE,Chrome... and running 8.1 HA OS

thomasloven commented 2 years ago

Should be fixed now.

ildar170975 commented 2 years ago

Thomas, card-mod-icon & card-mod-color seem to be working properly, thank you!

Update: they work in the default theme, not in a custom card-mod-theme. Any chance that a custom card-mod-theme may affect this?

With one my test card-mod-theme - card-mod-icon & card-mod-color work OK. With another theme - does not work. Need some time to understand the reason...

Update: If a theme file contains this (even w/o styles) - the card-mod-icon & card-mod-color stop working:

  card-mod-row-yaml: |
    .: |

Strange that it stops working for sensor, input_boolean, zone, device_tracker rows - but for binary_sensor it works )))).

thomasloven commented 2 years ago

K7PmaArVnq Can't reproduce

https://github.com/thomasloven/lovelace-card-mod/blob/master/test/themes/airy.yaml

- entity: sensor.outside_temperature
            card_mod:
              style: |
                :host {
                  --card-mod-icon: mdi:star;
                  {% if is_state('light.bed_light', 'on') %}
                  --card-mod-icon-color: red;
                  {% else %}
                  --card-mod-icon-color: green;
                  {% endif %}
                }

comet424 commented 2 years ago

seems to be working thanks for fixing it.. really appreciate it... i like this as without this you cant change the color to what you want

ildar170975 commented 2 years ago

@comet424 Could you test it with card-mod-theme as I did it? Because so far I did not succeed... The card-mod-icon & card-mod-color are not working with a simple card-mod-theme.

comet424 commented 2 years ago

@ildar170975 sure ill try it today and see how it goes... ill add the thomas code and ill add the lines to one of mine.. to change the icon ill get back to ya to see if i have same issue

did you also try clearing the web browser cache? but ill defiantly try for ya

ildar170975 commented 2 years ago

did you also try clearing the web browser cache?

I did it plenty of times... Nest step - I'll try to create a fresh test HA instance with only card-mod installed, may be it's a problem with some other plugins...

comet424 commented 2 years ago

@ildar170975 so i can and can not get that to work..... it wont work in my case coding and yours has different if statements.. but im also using a "midnight" theme for the card... but for me it works as a toggle

  - entity: switch.b_building_lights
    name: Building Lights (LED)
    icon: hass:lightbulb
    secondary_info: last-updated
    card_mod: 
    style: |
            :host {
                {% if is_state(config.entity,'on') %}
                --card-mod-icon: mdi:shield-off-outline;
                --card-mod-icon-color: red;
                {% else %}
                --card-mod-icon: mdi:shield-remove-outline;
                --card-mod-icon-color: cyan;
                {% endif %}
            }

so it will go red and cyan and change the icon the bottom of my code is

title: Building
state_color: true
theme: midnight
show_header_toggle: false

now the coding that works for me in mine is

    style: |
      :host {
      --card-mod-icon-color: 
      {% if states(config.entity) == 'on' %} 
        yellow;
      --card-mod-icon: mdi:car; 
      {% elif states(config.entity) == 'off' %}
        green;
      --card-mod-icon: mdi:star; 
      {% else %}
        blue;
      --card-mod-icon: mdi:car; 
      {% endif %}
      ;
      }

and for me this is how i started

    card_mod: null
    style: |
      :host {
      --card-mod-icon-color: 
      {% if states(config.entity) == 'on' %} 
        yellow
      {% elif states(config.entity) == 'off' %}
        green
     {% else %}
        blue
      {% endif %}
      ;
      }

see if that works and if i missed a step try what i did above

and what i couldnt get it to work is my yellow green blue i needed to ass ; at the end of if it when i added the icon change

comet424 commented 2 years ago

and the way i have it @ildar170975 is yellow is on green is off and blue means the device is offline

comet424 commented 2 years ago

@ildar170975 also try using
card_mod: null

i have found if you have card_mod: it wont work the null has to be there.. so give that a try too

ildar170975 commented 2 years ago

    card_mod: null
    style: |

correct this error.

Just create a theme with ONE style:

  card-mod-row-yaml: |
    .: |

and check this small code:

  card_mod:
    style: |
      :host {
        --card-mod-icon-color: yellow;
        --card-mod-icon: mdi:car;
      }

Check if the style is applied with a default theme and with that custom theme.

comet424 commented 2 years ago

ok so i not that advanced with HA and stuff

so i only know the add on themes...

so youll have to step by step it better

and do i add that to my switch

ildar170975 commented 2 years ago

OK, leave it.

comet424 commented 2 years ago

sorry couldnt help ya ):

ildar170975 commented 2 years ago

@thomasloven Please check this: https://github.com/thomasloven/lovelace-card-mod/issues/206#issuecomment-1150422022 There are some issues with input_boolean, switch, sensor, device_tracker & zone.

ildar170975 commented 2 years ago

Can I help somehow, with examples, debugging?

Please create a small theme: https://github.com/thomasloven/lovelace-card-mod/issues/187#issuecomment-1145112018

And add an Entities card with entities for DIFFERENT domains (sensor, input_number, ...). For each row specify a style: https://github.com/thomasloven/lovelace-card-mod/issues/187#issuecomment-1145112018

Check the styles with a default theme and that custom theme..

thomasloven / lovelace-card-mod

--card-mod-icon-color does not work #187