Lovelace Picture Elements and Glance icon color issue

Configuration
1

Hi,

I customized some icons in Lovelace so they show a different icon and color depending on states. For example, I have a power monitor plug connected to an non smart electric fireplace. I use the power output monitoring of the plug to know if the fireplace is off/on or heating. It works OK everywhere but in a Picture Element. There, the color is the color of the plug relay and not what I want it to show. See below:

image
image394×601 36.2 KB

If you look near the top left, the ‘fire’ icon is blue, meaning the fireplace is off and this is also confirmed by the last line showing rgb(92,90,59) for icon color. But if you look on the lower right, the flame is yellow.

This is how it is defined in Lovelace:

elements:
:
: Some other devices
:
  - entity: switch.foyer_powermonitor
    style:
      left: 15%
      top: 80%
    tap_action:
      action: none
    double_tap_action:
      action: none
    type: state-icon
:
: Some other devices
: 
image: /local/PlanCave.png
theme: slate
type: picture-elements

I’m using custom_ui to adjust the color. This is how it’s defined in customize.yaml:

switch.foyer_powermonitor:
  templates:
    icon: "return 'mdi:fire';"
    icon_color: "if (state == 'Unavailable') return 'rgb(189, 189, 188)'; else if (entities['sensor.foyer_powermonitor_energy_apparentpower'].state < 30) return 'rgb(92.90.59)'; else if (entities['sensor.foyer_powermonitor_energy_apparentpower'].state < 100) return 'rgb(255,234,1)'; else return 'rgb(217,20,20)';"

Anybody know how I can fix this?

Update: Glance card behaved the same way.

Thanks!

2

Somehow using colors not close (or equal) to my Slate them colors fixed it.

switch.foyer_powermonitor:
  templates:
    icon: "return 'mdi:fire';"
    icon_color: "if (state == 'unavailable') return 'rgb(193,193,193)'; else if (entities['sensor.foyer_powermonitor_energy_apparentpower'].state < 30) return 'rgb(54, 95, 140)'; else if (entities['sensor.foyer_powermonitor_energy_apparentpower'].state < 100) return 'rgb(251,210,41)'; else return 'rgb(217,20,20)';"