Any way to use lovelace-card-mod to change the base icon color but then when the entity is turned on, have the state icon color go to whatever the default "on" color is?

wtstreetglow · December 11, 2023, 3:36pm

Hello all,

Could I get some help on figuring out if the below is doable and how to do it possibly.

Below is what I have so far but I’m noticing it sets the color to black and it doesn’t change after the icon is pressed. (card-mod). I would like it to be black as just the default color but then go to whatever color it used to go to without using the card-mod. For instance, I think bulbs go to the color they actually are if you have the “state to color” turned on in the entity settings.

Is there a way to do this? (So when its off or inactive, icon is black, and its yellow when on or active)

type: custom:minimalistic-area-card
title: Back Patio
area: back_patio
shadow: true
hide_unavailable: true
state_color: true
darken: true
card_mod:
  style: |
    :host {
      --card-mod-icon-color: black;
    }
tap_action:
  action: navigate
  navigation_path: /dashboard-automatic/back-patio
entities:
  - entity: light.all_back_patio_lights
  - entity: switch.back_patio_fountain
  - entity: switch.back_patio_speaker_power

Olivier1974 · December 11, 2023, 6:37pm

You can use conditions in card_mod and reuse existing theme colors

card_mod:
  style: |
    :host {
      --card-mod-icon-color: 
          {% if is_state('binary_sensor.zigbee_ping', 'on') %}
            rgba(0,255,0,0.15)
          {% else %}
            var(--primary-text-color)
          {% endif %};
      }

This is an example, not your final code.
In your situation, you should not use the --card-mod-icon-color tag.
Have a look at examples from the card-mod thread.

EDIT: I’m not using custom:minimalistic-area-card so I can’t help more

Olivier1974 · December 11, 2023, 6:54pm

I’ve found this example in the card-mod thread


type: custom:minimalistic-area-card
title: Office
area: office
tap_action:
  action: navigate
  navigation_path: /home-dashboard/office
entities:
  - fan.office
  - light.office
card_mod:
  style: |
    ha-state-icon$: | {
      color: red;
      }

That you might be able to combine with my previous reply.

wtstreetglow · December 11, 2023, 6:54pm

Thank you for showing me this! I apologize as I’m not the greatest with customizing things just yet based on code.

This has to be done for each individual entity in my situation? (previous photo)

Why would I not want to use the method you have shown? I’m sorry for not following you on this. This is the first time I’ve ever gotten into the custom cards/ abilities etc.

wtstreetglow · December 11, 2023, 6:55pm

Thank you for spending your time to help!!

Olivier1974 · December 11, 2023, 6:56pm

Yes, you’ll have to find a way to do it for each individual icon, that is the reason why you should not use the --card-mod-icon-color, which is all or nothing.

Follow the link I gave and search for minimalistic-area-card in the topic, you’ll find other examples.

wtstreetglow · December 11, 2023, 6:57pm

I have found all of these but haven’t been able to get one to work and I’m hoping there is a way to not have to do this on a one by one basis for entities but I have a feeling there may not be:

    card_mod:
      style: |
        :host {
          {% if states('light.all_back_patio_lights') != 'on' %}
          --state-cover-active-color: var(--yellow-color);
          color: yellow;
          {% endif %}
          }


card_mod:
  style: |
    :host {
      --card-mod-icon-color: black;
    }

    styles:
      icon:
        - color: |
            [[[
              if (entity.state == 'on') return 'white';
              else return 'yellow';
            ]]]

   card_mod:
     style: |-
       ${ if (ROOM_STATE === 'on') {
         'ha-card {--card-mod-icon-color: yellow;}'
       } else {
        'ha-card {--card-mod-icon-color}'
       }}

wtstreetglow · December 11, 2023, 7:06pm

Olivier1974:

You can use conditions in card_mod and reuse existing theme colors
card_mod:
  style: |
    :host {
      --card-mod-icon-color: 
          {% if is_state('binary_sensor.zigbee_ping', 'on') %}
            rgba(0,255,0,0.15)
          {% else %}
            var(--primary-text-color)
          {% endif %};
      }
This is an example, not your final code.
In your situation, you should not use the --card-mod-icon-color tag.
Have a look at examples from the card-mod thread.

Here all my posts which may be useful: NOTE: Do not forget to add a “card_mod:” keyword before “style:” (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes post Slider entity …

EDIT: I’m not using custom:minimalistic-area-card so I can’t help more

Not a problem. For some reason I couldn’t get those combinations to work either.

  - type: grid
    square: true
    columns: 3
    cards:
      - type: custom:minimalistic-area-card
        title: Back Patio
        area: back_patio
        shadow: true
        hide_unavailable: true
        state_color: true
        darken: true
        tap_action:
          action: navigate
          navigation_path: /dashboard-automatic/back-patio
        entities:
          - entity: light.all_back_patio_lights
            card_mod:
              style: |
                :host {
                  --card-mod-icon-color: 
                      {% if is_state('light.all_back_patio_lights', 'off') %}
                        rgba(0,0,0,1)
                      {% else %}
                        var(--primary-text-color)
                      {% endif %};
                  }
          - entity: switch.back_patio_fountain
          - entity: switch.back_patio_speaker_power

Olivier1974 · December 11, 2023, 7:29pm

card_mod apply to the full card, not on the entity (so you have to pay attention to the indentation).
You’ll have to find, in the examples of the topic which one allow to colorize “per icon”

Olivier1974 · December 11, 2023, 7:34pm

What about

type: custom:minimalistic-area-card
title: Eingang
area: eingang
hide_unavailable: false
state_color: true
card_mod:
  style: |
    :host {
      --card-mod-icon-color:
        {% if is_state(config.entity, 'off') %}
          black
        {% else %}
          var(--primary-text-color)
        {% endif %};
    }
entities:
  - light.all_back_patio_lights
  - switch.back_patio_fountain
  - switch.back_patio_speaker_power

wtstreetglow · December 11, 2023, 7:35pm

So the below actually worked but like you said, when I clicked on the patio lights, it changed all icon entity colors and not just the patio.

  - type: grid
    square: true
    columns: 3
    cards:
      - type: custom:minimalistic-area-card
        card_mod:
          style: |
            :host {
              --card-mod-icon-color: 
                  {% if is_state('light.all_back_patio_lights', 'off') %}
                    rgba(0,0,0,1)
                  {% else %}
                    var(--primary-text-color)
                  {% endif %};
              }
        title: Back Patio
        area: back_patio
        shadow: true
        hide_unavailable: true
        state_color: true
        darken: true
        tap_action:
          action: navigate
          navigation_path: /dashboard-automatic/back-patio
        entities:
          - entity: light.all_back_patio_lights
          - entity: switch.back_patio_fountain
          - entity: switch.back_patio_speaker_power

wtstreetglow · December 11, 2023, 7:35pm

Let me give it a try right quick.

Olivier1974 · December 11, 2023, 7:37pm

I changed it a bit, a ) was missing, some indentation, …
I have hope with the config.entity

wtstreetglow · December 11, 2023, 7:40pm

That one doesn’t seem to be working I don’t believe. Below is what I have:

      - type: custom:minimalistic-area-card
        card_mod:
          style: |
            :host {
              --card-mod-icon-color:
                {% if is_state(config.entity, 'off') %}
                  black
                {% else %}
                  var(--primary-text-color)
                {% endif %};
            }
        title: Back Patio
        area: back_patio
        shadow: true
        hide_unavailable: true
        state_color: true
        darken: true
        tap_action:
          action: navigate
          navigation_path: /dashboard-automatic/back-patio
        entities:
          - entity: light.all_back_patio_lights
          - entity: switch.back_patio_fountain
          - entity: switch.back_patio_speaker_power

The below portion is working but changes the whole row of icons based on just clicking one of them:

            card_mod:
              style: |
                :host {
                  --card-mod-icon-color: 
                      {% if is_state('light.all_back_patio_lights', 'off') %}
                        rgba(0,0,0,1)
                      {% else %}
                        var(--primary-text-color)
                      {% endif %};
                  }

Olivier1974 · December 11, 2023, 7:44pm

I’m not giving up but as I’m not using that specific card, I can’t test my solutions myself.

So, I think you might need someone else to help you. At least I taught you that you can re-use theme colors and conditions …

EDIT: as the author of the card redirect to the entities option for the card, you can still have a look at the card-mod for entities.

wtstreetglow · December 11, 2023, 7:46pm

Yeah for sure. I’ve posted over in the thread you linked me to and got my hand smacked for tagging someone that I’m sure knows whether it can be done or not.

We’ll eventually get there, I just doubt it will be on my own

Thank you very much though!! I’m like you, I think it’s doable, I just don’t know how at the moment.

Olivier1974 · December 11, 2023, 7:47pm

Tagging someone is against the rules of the community.

wtstreetglow · December 11, 2023, 7:48pm

I found that out the hard way.

#created not happy individuals

Olivier1974 · December 11, 2023, 7:52pm

My last attempt, using card_mod at entity level

entities:
  - entity: light.all_back_patio_lights
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: :
                {% if is_state('light.all_back_patio_lights', 'off') %}
                  black
                {% else %}
                  var(--primary-text-color)
                {% endif %};
            }

Pay attention to indentation

wtstreetglow · December 11, 2023, 7:59pm

Let’s see what happens.
Below is what I used:

Looks like a “no go” again on my end.

      - type: custom:minimalistic-area-card
        title: Back Patio
        area: back_patio
        shadow: true
        hide_unavailable: true
        state_color: true
        darken: true
        tap_action:
          action: navigate
          navigation_path: /dashboard-automatic/back-patio
        entities:
          - entity: light.all_back_patio_lights
            card_mod:
              style:
                hui-generic-entity-row:
                  $: |
                    state-badge {
                      color: :
                        {% if is_state('light.all_back_patio_lights', 'off') %}
                          black
                        {% else %}
                          var(--primary-text-color)
                        {% endif %};
                    }
          - entity: switch.back_patio_fountain
          - entity: switch.back_patio_speaker_power

I found the below at this link:

So worst case I could go that direction. Kind of weird but maybe it would work. (It looks like they are changing the whole themes color in the core settings)

How to Override an Icon's Default Color?

you can change all state colors in your themes , no need for card_mod, and 100% reliable and supported by core, always preferable to any custom solution, did you have a look at that?
just create a default-adjusted theme, (not as you did I the card_mod) and only change the state-colors in that to your desire, and leave the rest. easy as can be
default_adjusted:

  state-binary_sensor-garage-on-color: var(--alert-color)
would be all it takes for the garage_door binary