Variable to Set Icon Color (RGB) in Lovelace

Configuration Frontend
1

I’m trying to use a variable to dynamically set an icon color using the rgb_color attribute from a light and it’s not working.

label: |
  [[[
    var bri = Math.round(states['light.zachs_lamp'].attributes.brightness/2.55);
    var col = states['light.zachs_lamp'].attributes.rgb_color;
    return `<ha-icon icon="mdi:circle" style="width: 20px; height: 20px; color: col ;"></ha-icon>
    <span>‎‏‏‎ ‎‏‏‎ ‎<span style="color: white">${(bri ? bri + '%' : 'Off')}</span></span>`
  ]]]

Thoughts?

2

If anyone else is interested in this, I made it work by moving the color aspect to label style variable rather than the label itself.

- type: custom:button-card
  entity: light.zachs_lamp
  name: Zach's Lamp
  show_entity_picture: true
  entity_picture: /local/ICONS_LIGHTING/ceiling_light.png
  show_label: true
  label: |
    [[[
      var bri = Math.round(states['light.zachs_lamp'].attributes.brightness/2.55);
      var col = states['light.zachs_lamp'].attributes.rgb_color;
      return `<ha-icon icon="mdi:circle" style="width: 20px; height: 20px;"></ha-icon>
      <span>‎‏‏‎ ‎‏‏‎ ‎<span style="color: white">${(bri ? bri + '%' : 'Off')}</span></span>`
    ]]]
  styles:
    label:
      - color: >
          [[[ if (entity.state === 'on') return "rgb(" +
          states['light.zachs_lamp'].attributes.rgb_color + ")";]]]
3 Likes
3

I literally create the account, signed up, verified my email address just to thank you. A fuckin genius you are.

1 Like
4

Brilliant! I was stuck on this all day, thank you very much

1 Like