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?

Configuration Frontend
,
1

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

image
image1920×1044 129 KB

2

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

3

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.

4

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.

5

Thank you for spending your time to help!!

6

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.

7

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}'
       }}
8

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
9

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”

10

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
11

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
12

Let me give it a try right quick.

13

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

14

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 %};
                  }
15

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.

16

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 :slight_smile:

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

17

Tagging someone is against the rules of the community.

18

I found that out the hard way.

#created not happy individuals

19

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

20

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)