Set icon color with config-template-card?

Configuration Frontend
1

Hey all –

I’m using the add-on called “config-template-card” that lets you set customizations to things on a card. I’m using it to set custom icons which is great.

For the life of me, I cannot figure out how to set the color of the icons.

Anyone know how to do this?

Here is the code in my card:

type: 'custom:config-template-card'
variables:
  front_porch_light_state: 'states[''switch.front_porch_light''].state'
  back_porch_lights_state: 'states[''switch.back_porch_lights''].state'
  garage_lights_state: 'states[''switch.garage_lights''].state'
  bocce_lights_north_state: 'states[''switch.bocce_lights_north''].state'
entities:
  - entity: switch.front_porch_light
  - entity: switch.back_porch_lights
  - entity: switch.garage_lights
  - entity: switch.bocce_lights_north
card:
  type: entities
  entities:
    - entity: switch.front_porch_light
      icon: >-
        ${front_porch_light_state === 'off' ? 'mdi:lightbulb-outline' :
        'mdi:lightbulb-on'}
    - entity: switch.back_porch_lights
      icon: >-
        ${back_porch_lights_state === 'off' ? 'mdi:lightbulb-outline' :
        'mdi:lightbulb-on'}
    - entity: switch.garage_lights
      icon: >-
        ${garage_lights_state === 'off' ? 'mdi:lightbulb-outline' :
        'mdi:lightbulb-on'}
    - entity: switch.bocce_lights_north
      icon: >-
        ${bocce_lights_north_state === 'off' ? 'mdi:lightbulb-outline' :
        'mdi:lightbulb-on'}
title: Lighting
state_color: true
2

it seems, you try to change the icon, not the icon color.
I think you have to reference the variable in your condition.
Here is what I have:

      icon: '${vars[0] !== ''closed'' ? ''sfs:skylight-open'' : ''sfs:skylight-closed'' }'

In your case it should be vars[2].

if you just want to change the color of the icon, you can do it like this:

      style: |
        :host {
          --paper-item-icon-color: {% if not is_state(config.entity, 'closed') %} var(--paper-item-icon-active-color) {% else %} var(color) {% endif %};
        }
1 Like
3

Thanks for the reply. Greatly appreciated! I’ll give this a try in the morning and reply with the results. :sunglasses:

4

Unfortunately, the color doesn’t work. How would I do with big colors so I would know for sure if it was working or not? Like red for on blue for off? When I use the code you listed above, no color changes. I still just get the icon changing. I made a simple card with one light on it to make it easier.

type: 'custom:config-template-card'
variables:
  bocce_lights_south_state: 'states[''switch.bocce_lights_south''].state'
entities:
  - entity: switch.bocce_lights_south
card:
  type: entities
  entities:
    - entity: switch.bocce_lights_south
      icon: >-
        ${bocce_lights_south_state === 'off' ? 'mdi:lightbulb-outline' :
        'mdi:lightbulb-on'}
      style: |
        :host {
          --paper-item-icon-color: {% if not is_state(config.entity, 'on') %} var(--paper-item-icon-active-color) {% else %} var(color) {% endif %};
        }  
title: Lighting
state_color: true
5

ok, so what wrote before, was bulls***.
There is no need to define or use variables, it can just make life easier.

To check the colors (which would have to be defined in your theme) you can substitute them for color-names:

replace “var(–paper-item-icon-active-color)” with “green”
replace “var(color)” with “red”

All without quotes.

6

I think you’re assuming that @Allistah is using card mod. Without card mod, you can’t adjust the color. So, @Allistah are you using card mod?

7

Unfortunately, anything that uses --paper-item-icon-color: doesn’t work on older iOS 10 (iPad 4) devices.

What does work on them for setting color for icons for a button card at least is the custom button-card. It allows you to use Javascript templates where you put the JS templates inside [[]]. That works great, but again, I don’t have that functionality everywhere - I wish I did.

To answer the question, I do have card-mod installed but like I said anything that uses that --paper-item-icon-color: doesn’t work on these older devices unfortunately.

Does anyone know how to get an entities card where I can use Javascript templates?

I just re-read what seanomat said… Let me try again by replacing those with their suggestions and see what happens.

8

I just woke up so I forgot I had tried that. Here is my current code. None of the colors show up on the older iOS 10 devices (iPad 4). They show up and work fine on the computer and newer iOS devices like a first generation iPad Pro.

type: entities
style: |
  ha-card {
    color: red;
  }
entities:
  - switch.bocce_lights_south
  - entity: switch.bocce_lights_south
    style: |
      :host {
        --paper-item-icon-color:
          {% if states(config.entity) == 'off' %}
            blue
          {% else %}
            red
          {% endif %}
          ;
      }

Are there any other ways to change color? Like I said, the method using Javascript templates where you put the templates inside [[]] do actually work on these older devices.

9

Do you have a way to inspect the elements on the older devices?

10

Not at present but I could look it up and see if I can figure it out. If I could, what would I be looking for?

11

The var that is being used for the color. If the color is not being applied at all, then there’s nothing you can do. How old are these iOS devices?

12

They’re pretty old. I keep looking because I can achieve this with Javascript templates where you put that code inside [[[ ]]]. That was giving me hope that I could figure it out.

13

Yes, you are right @petro. I always mix up config-template-vard and card-mod.

14

Yeah, overall themes are not being applied on my gen 2ipad from 2012. I doubt anything will work. The underlying css interpretation (framework) is most likely missing in the OS/browser.

15

Yeah I’m feeling defeated and am starting to think that I’m fighting a losing battle.

Do either of you two have any devices on the walls at home? I wonder what are some affordable solutions that would work well if I had to replace these old things.

16

I do not. Sorry.