đŸ”č Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
1744

Ok but how can you suggest me with that :

 - type: entities
            entities:
              - entity: light.plafonnier
                card_mod:
                      style: |
                        :host {
                          --card-mod-icon-color: {% if is_state('light.plafonnier', 'on') %} yellow {% else %} white {% endif %}
                        }  
                name: Plafonnier
              - entity: light.lampe_buffet
                card_mod:
                      style: |
                        :host {
                          --card-mod-icon-color: {% if is_state('light.lampe_buffet', 'on') %} yellow {% else %} white {% endif %}
                        }  
                name: Buffet
1745

I do not know what it is - "--card-mod-icon-color", tried to search it here , it is in your posts only.
What do you want to achieve? Is it not covered by that post?

1746

I replied to you on facebook and you ignored me
 You need to use --paper-item-icon-color.

1747

I want to make cooler icon responsive compared to a entity state
E.g: if lampe_buffet is on , I want Yellow if not I want white icon color

If I use —paper-item-icon-color , it doesn’t work with conditions

1748

Yes, and it’s because you’re copying —paper-item-icon-color from facebook! Like I said on facebook.

Type it out instead of copy/paste.

1749

It is explained, please read again:

image
image711×385 14 KB

1750

I’ve made it like this :slight_smile:

  - entity: light.lampe_bureau 
                card_mod:
                      style: |
                        :host {
                          --paper-item-icon-color: red
                          --paper-item-icon-active-color: green
                        }  
                name: Lampe bureau

It’s Okay becaus I really don’t understand

1751

Sorry @petro I don’t ignore you , I just forget

1752

You need to terminate each line

add ; at the end.

1753

Solutions like this may be used by a simple “copy/paste”. Otherwise the thread will be flooded by explaining the same things again & again. That was my intention - accumulate solutions in dedicated posts to avoid spam


1754

I think I just understand,
because I type this

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

instead this:

       style: |
                  :host {
                    --paper-item-icon-active-color: red;
                    --paper-item-icon-color: cyan;
                  }

If I remove card_mod it’s okay

1755

You should read docs: GitHub - thomasloven/lovelace-card-mod: đŸ”č Add CSS styles to (almost) any lovelace card

1756

Does

--paper-item-icon-active-color: red;
--paper-item-icon-color: cyan;

work for switch entities ?
because , if I apply this to switch , It’s stays red even if ‘on’

    - type: entities
        entities:
          - entity: switch.pool_pump
            style: |
              :host {
              --paper-item-icon-active-color: green;
              --paper-item-icon-color: red;
              }
1757

image
image702×96 4.93 KB

1758

I understand this, but I don’t understand how to make this method with switch and condition.
Sorry but I new on this and I struggle a lot for understand

1759

Ok. Wait a little, today will try to explain.

1760

thanks a lot

1761

So, what you cannot do?
It is already explained in the post I gave you.
image

type: entities
state_color: true
entities:
  - entity: switch.test_switch
    name: Colored
    style: |
      :host {
        --paper-item-icon-active-color: red;
        --paper-item-icon-color: cyan;
      }
1762

And your code seems to be wrong - check indentation for the 1st line.

1763

It’s okay , I just forget to write state_color: true

Thanks @Ildar_Gabdullin