Card-mod - combined usage of icon- and background color change

olderbag · April 2, 2025, 8:07am

I’m trying to change the icon color dependent of entity 1 and background dependent of entity 2 with the following code:

card_mod:
  style: |
    :host {
      {% if is_state('switch.w2_waschmaschine_lauft', 'on') %}
      --card-mod-icon-color: gold
      {% elif is_state('switch.w2_waschmaschine_lauft', 'off') %}
      --card-mod-icon-color: steel blue
      {% elif is_state('switch.w2_waschmaschine_fertig', 'on') %}
      --ha-card-background: lightgreen;
      {% elif is_state('switch.w2_waschmaschine_fertig', 'off') %}
      --ha-card-background: transparent
      {% endif %}
      }

but it dioesn’t work. Changing state of entity 1 is changing the icon’s color to gold. But then any changes don’t take effect.

LiQuid_cOOled · April 2, 2025, 8:23am

card_mod:
  style: |
    :host {
      --card-mod-icon-color: {{ 'gold' if is_state('switch.w2_waschmaschine_lauft', 'on') else 'blue' }};
      --ha-card-background: {{ 'lightgreen' if is_state('switch.w2_waschmaschine_fertig', 'on') else 'transparent' }};
      }

steel blue won’t work

olderbag · April 2, 2025, 9:03am

Thanks a lot. It works.

Steel blue works with “SteelBlue”

LiQuid_cOOled · April 2, 2025, 9:16am

Please take the time to mark the solution as the answer, you do that by selecting the three dots under the post:

Then select the check box:

By doing so:

this thread can be useful to other users as well (this thread comes up as solution when starting a thread which is similar to yours).
this prevents that someone else steps in trying to help

Thanks for giving back to the community!

olderbag · April 3, 2025, 7:35am

Additional question:

i’m using the color “transparent” to return from lightgreen to the default background color.
Using a specific color (e.g. white) is not the solution because dependent of the theme, the background is different.
Unfortunately, in dark theme the background is not really black but a very very dark grey.
So it would be better to define the “default” color to force the display of the background color used in the specific theme.
Is this possible?

LiQuid_cOOled · April 3, 2025, 7:41am

Which theme are you using? You should be able to adjust the theme’s standard background color.

Another option is to match the theme’s background color in card_mod code by identifying the theme’s color settings.

You can use a program like Windows Paint to identify the RGB settings for the very very dark grey color settings.

olderbag · April 3, 2025, 7:58am

Which theme are you using? You should be able to adjust the theme’s standard background color.

We are using different themes. One is using the default theme, where card’s background is white. Others use midnight, where it is the mentioned grey.

Another option is to match the theme’s background color in card_mod code by identifying the theme’s color settings.

Is it possible within the css code to identify the actual theme’s background color an use it?

You can use a program like Windows Paint to identify the RGB settings for the very very dark grey color settings.

After i identified it i could use it to set the background. But when a user uses the default theme with another background color?

LiQuid_cOOled · April 3, 2025, 8:05am

Transparent should work even if a theme is applied

Do you see different results with this?

card_mod:
  style: |
    :host {
      --card-mod-icon-color: {{ 'gold' if is_state('switch.w2_waschmaschine_lauft', 'on') else 'blue' }}!important;
      --ha-card-background: {{ 'lightgreen' if is_state('switch.w2_waschmaschine_fertig', 'on') else 'transparent' }} !important;
      }

olderbag · April 3, 2025, 8:09am

Transparent should work even if a theme is applied

Yes it works by showing the dashboard’s background and not the default card’s background (left card “Waschmaschine”):

LiQuid_cOOled · April 3, 2025, 8:11am

!important will override styling rules that were being applied by the Theme

olderbag · April 3, 2025, 9:05am

Same result

I think i need a command like “RETURN to the styling rules applied by the theme”.

LiQuid_cOOled · April 3, 2025, 9:07am

Please share the entire card code for this

Ae you using custom:button-card ?

olderbag · April 3, 2025, 9:09am

how_name: true
show_icon: true
type: button
tap_action:
  action: perform-action
  perform_action: switch.turn_off
  target:
    entity_id: switch.w2_waschmaschine_fertig
  data: {}
entity: switch.w2_waschmaschine_lauft
name: Waschmaschine
icon: mdi:washing-machine
show_state: false
card_mod:
  style: |
    :host {
      --ha-card-background: {{ 'lightgreen' if is_state('switch.w2_waschmaschine_fertig', 'on') else 'transparent' }} !important;
      }

With or without “!important” the same result.

LiQuid_cOOled · April 3, 2025, 9:16am

card_mod:
  style: |
   ha-card {
     background: {{'lightgreen' if is_state(config.entity, 'on') else 'transparent' }} ;
      }

olderbag · April 3, 2025, 9:29am

I put in “config.entity” instead of “switch.w2_waschmaschine_fertig”.

Now the card background remains transparent.

Note:
I use the entity “…_lauft” as primary entity to change the icon when the machine is running.
I use the entity “…-fertig” to change the background when the machine has terminated.
i use the entity “…-fertig → off” as tap-action to switch the card background back to default.

LiQuid_cOOled · April 3, 2025, 9:43am

If i understand correctly…

how_name: true
show_icon: true
type: button
tap_action:
  action: perform-action
  perform_action: switch.turn_off
  target:
    entity_id: switch.w2_waschmaschine_fertig
entity: switch.w2_waschmaschine_lauft
name: Waschmaschine
icon: mdi:washing-machine
show_state: false
card_mod:
  style: |
   ha-card {
     background: {{'lightgreen' if is_state('switch.w2_waschmaschine_fertig', 'on') else 'transparent' }} !important;
      }
   ha-state-icon{
      color: {{'red' if is_state('switch.w2_waschmaschine_lauft', 'on') else 'blue' }} !important;
          }

You may need to change the perform_action: switch.turn_off to perform_action: switch.toggle to get the icon to change

olderbag · April 3, 2025, 9:57am

To put it on a common base for future changes i inserted the code exactly as given above. It’s in principle what i want, except…

…except the transparency when the entity ‘switch.w2_waschmaschine_fertig’ returns to off.

The transparency shows the dashboard’s default background of the used theme and not the card’s default background.

LiQuid_cOOled · April 3, 2025, 10:03am

Try

card_mod:
  style: |
   ha-card {
     background: {{'lightgreen' if is_state('switch.w2_waschmaschine_fertig', 'on')  else 'rgb(0,0,0)' }} !important;
      }
   ha-state-icon{
      color: {{'red' if is_state('switch.w2_waschmaschine_lauft', 'on') else 'blue' }} !important;
          }}

olderbag · April 3, 2025, 10:05am

Result is a true black background of the card no matter what theme.

LiQuid_cOOled · April 3, 2025, 10:08am

Do you agree if you match the RGB color of the background theme it will resolve your issue?