search

thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.12k stars 167 forks source link

card mod paper-item-icon-color does not change color on dark or custom theme (after HA upgrade to 2021.12.0) #168

Closed kodifan closed 2 years ago

kodifan commented 2 years ago

My Home Assistant version: 2021.12.0

My lovelace configuration method (GUI or yaml): GUI

Not sure that is connected with this integration or this happened after upgrading HA to 2021.12.0 version but on previous version all worked as expected but now color icon works only on light default theme - on dark theme or any custom theme icons are all the same color. What is more strange, it does not work only on buttons , on the list of entities there is no problem. I attach 2 screenshots with examlpes.

light_theme dark_theme custom_theme

nenadmilano commented 2 years ago

The font color also seems to not adapt when switching themes (day / night) and always stays like it was bevore. Happens only to cards which I modify with card-mod.

kodifan commented 2 years ago

Yes definitely 2021.12.0 HA update broke something. On every device I use all is working fine until message "new fronted is available, please reload" . I updated lately to newest 2021.12.4 version but it did not helped. Either way i think this integration must be adapted to new HA fronted, they wont ix it...

ildar170975 commented 2 years ago

Many pics & no code - how people are supposed to help?

ildar170975 commented 2 years ago

Happens only to cards which I modify with card-mod.

If you hardcoded some colors or font-sizes - no wonder they are not changing after switching themes. We can only guess since you provided no code.

ildar170975 commented 2 years ago

What is more strange, it does not work only on buttons , on the list of entities there is no problem.

What buttons are you talking about? If it is custom:button-card - do you use card-mod inside or it's own style feature? If second - ask about it in custom:button-card repository. Again, you provided no code.

nenadmilano commented 2 years ago

Happens only to cards which I modify with card-mod.

If you hardcoded some colors or font-sizes - no wonder they are not changing after switching themes. We can only guess since you provided no code.

So I hardcoded some font sizes with card-mod (code snippet below) but it seems that the change of the font color is somehow disabled since the last HA major release. I have two themes, one for night and one for day where the font color is either dark or light grey but this change is not triggered by the theme change - i manually have to refresh the Dashboards on my iPads (pull-down refresh) to get the font color changed.

            - entities:
                - entity: sensor.office_iaq_level
                  name: Air Quality
                - entity: sensor.netatmo_milkain_arbeitszimmer_temperature
                  name: Temperatur
                #- entity: sensor.temp_diff_az
                #  name: Temp. Diff.
                #- entity: sensor.lueften_az
                #  name: Lüften?
                - entity: sensor.netatmo_milkain_arbeitszimmer_humidity
                  name: Luftfeuchtigkeit
                - entity: sensor.netatmo_milkain_arbeitszimmer_co2
                  name: CO2
                - entity: fan.air_purifier
                #- entity: sensor.netatmo_milkain_arbeitszimmer_battery_percent
                #  name: Batterie
                - entity: sensor.total_energy_consumption
                  #icon: 'mdi:solar-power'
                  name: Energy need
                - entity: sensor.efriends_power_distribution
                  #icon: 'mdi:solar-power'
                  name: Source
              show_header_toggle: false
              title: "\U0001F4BB  Office  \U0001F321"
              state_color: true
              type: entities
              card_mod:
                style: |
                  ha-card {
                    font-size: 20px;
                  }

let me know if you need more code or logs for debugging. Thanks for your support!

ildar170975 commented 2 years ago

change of the font color is somehow disabled since the last HA major release.

There is no code for changing a font color in your snippet. If font color is defined by your themes then this could be related to card-mod only in case of using "card-mod-themes" as a part of your themes. Do you use "card-mod-themes" with changed font color?

i manually have to refresh the Dashboards on my iPads

iOS client is a buggy dark hole, check PC browser first.

kodifan commented 2 years ago

Many pics & no code - how people are supposed to help?

code quite messy i guess (a mix of grid, vertical stack,custom:mod-card and custom:switch-popup-card), but this is irrelevant. it was working before upgrade. and even the simplest test configuration do not work.

this one works :

type: entities
entities:
  - entity: sensor.vacuum_suction_power
    style: |
      :host {    
        --paper-item-icon-color: 
          {% if is_state('sensor.vacuum_suction_power', 'Silent') %} 
            #99ccff
          {% elif is_state('sensor.vacuum_suction_power', 'Basic') %} 
            #5cbee0
          {% elif is_state('sensor.vacuum_suction_power', 'Medium') %} 
            #2187CC
          {% elif is_state('sensor.vacuum_suction_power', 'Strong') %} 
            #00478a
          {% endif %};
      }

this one do not:

type: button
tap_action:
  action: call-service
  service: script.vacuum_set_fan_speed
  service_data: {}
  target: {}
entity: script.vacuum_set_fan_speed
icon: mdi:fan
show_name: true
card_mod:
  style: |
    :host {
      --paper-item-icon-color: 
        {% if is_state('sensor.vacuum_suction_power', 'Silent') %}
          #00ccff
        {% elif is_state('sensor.vacuum_suction_power', 'Basic') %}
          #5cbee0
        {% elif is_state('sensor.vacuum_suction_power', 'Medium') %} 
          #2187CC
        {% elif is_state('sensor.vacuum_suction_power', 'Strong') %} 
           #00478a
         {% endif %};
     }
ildar170975 commented 2 years ago

Code quite messy i guess

You should always provide an short MWE (google it). At least this MWE is required for YOU first to test the problem.

type: button tap_action:

Use correct formatting. No indents in your code.

  • {% elif is_state('sensor.vacuum_suction_power', 'Strong') %}

    00478a

    {% endif %};

No "else" section here? Also, are you sure that states are capitalized?

Assuming that indentation is correct in your code - I see you are using ":host" but you should use ha-card. You cannot apply a code from a card of TYPE_1 to a card of TYPE_2 (with some exceptions), these are DIFFERENT cards.

kodifan commented 2 years ago

dear ildar170975 i know you are trying to make ma code better, but i guess you are missing the main problem. no matter how buggy my code is, it is working on light default theme (on the entities, default button, or custom button), but it is not working on dark default theme or any custom theme for buttons (but its working fine on entities card). so assuming that my code was not changed, either card mod integration - only thing that was upgraded is HA frontend.

ildar170975 commented 2 years ago

missing the main problem.

First you should create a code with a proper style. This is what I was talking about. Remove these if the else conditions - put it =red. See if it is of red color. Probably if it is red in light theme , it will be red in dark theme too.

This is not a theme issue since you got hard-coded colors in the code, not "var(--somthing)"

so assuming that my code was not changed

Imagine one thing: you got a wrong code but HA etc was tolerating it. Now it does not.

kodifan commented 2 years ago

no luck.

card_mod:
  style: |
    :host {
      --paper-item-icon-color: red

image image

ildar170975 commented 2 years ago

You still using :host https://github.com/thomasloven/lovelace-card-mod/issues/168#issuecomment-1001214636

kodifan commented 2 years ago

ha-card

yes, this one made it right. image

thanks for you time :)

ildar170975 commented 2 years ago

yes, this one made it right.

Great, now you can close the issue)

nenadmilano commented 2 years ago

change of the font color is somehow disabled since the last HA major release.

There is no code for changing a font color in your snippet. If font color is defined by your themes then this could be related to card-mod only in case of using "card-mod-themes" as a part of your themes. Do you use "card-mod-themes" with changed font color?

i manually have to refresh the Dashboards on my iPads

iOS client is a buggy dark hole, check PC browser first.

Thats my point, I am using card-mod just to change the font size, not any font color. Yet in the cards that I modify with card-mod the font colors don’t automatically change once a theme switch is initiated. Thats why I suspected card-mod to be the issue as it works on any other card just fine.

ildar170975 commented 2 years ago

Thats why I suspected card-mod to be the issue as it works on any other card just fine.

I propose you to add a post about this issue in a corresponding thread (https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744), we will continue investigation.