Picture-Elements paper-item-icon-active-color not working on some entities

Hi, In setting up my first Home Assistant, using picture-elements for a floorplan card, I am stuck on why some state-icon entities do not recognize “paper-item-icon-active-color”. I am using the Smartthings integration as I am migrating from having used that for several years.
Although my ceiling fans all recognize the “paper-item-icon-active-color” and change colors accordingly, none of my lights do. In the case of the the WIFi bulb lights, they default to a grey color when on, and the dimmer wall switch and dimmer outlet, they default to a deep-red color… all independent of what color I have set in “paper-item-icon-active-color”.
I attached a snapshot of the code for one of these.
Screenshot 2022-09-07 145830
Am I doing something wrong wrong or is there a way around this?

The "paper-item-icon-active-color" is not used for "light" entity if the light may be of ANY color.
You may forcibly set a switched on light’s icon to specified color (red, for instance) by card-mod.

Having same issue.
Been using this for some time to set a layout of my house with all the light and other appliances.
This update breaks all this, with sometimes colors that is barely visible on this card.


image

1 Like

Appears that anything '--paper-item-icon-color': has been depreciated with the latest release within the default UI… The only recourse, aside from restoring from backup is through themes.

I found a proposed workaround in another thread, here: I dislike the 2022.12 Color changes - #165 by robertwigley

The code was looking for is one of these, depending on the type. switch, fan or light.
There might be more, seems like its just the word that changes each time.
Need to use the RGB values.

  '--paper-item-icon-active-color': red

replaced by…

  '--rgb-state-switch-color': 255,0,0
  '--rgb-state-fan-color': 255,0,0
  '--rgb-state-light-color': 255,0,0
1 Like

And everything is broken again by the latest updates. :sob:

First of, before someone say themes again…
I have 3 switches. The color of the switches also indicate function.
eg…

  • Light off is blue. Light on is red
  • Camera off is red. Camera on is green.
  • Insect zapper off is black. Insect zapper on is orange.

How do you do that in themes?

I use a Picture Elements Card Configuration that has a whole floorplan under all the icons, showing locations.
The RGB values no longer works.
Is there another way of specifying the color? If themes has a way of linking to an item flag in Picture Elements Card Configuration or something.

type: picture-elements
image: local/Bottom2.PNG
title: Ground Floor
elements:
  - type: state-icon
    tap_action:
      action: toggle
    entity: switch.sonoff_1000e9a316_2
    title: Toilet
    icon: mdi:toilet
    style:
      top: 18%
      left: 48%
      '--paper-item-icon-color': Blue
      '--paper-item-icon-active-color': red
      '--rgb-state-switch-color': 255,0,0

Did you find a solution, I raised a very similar issue

You can use HEXA, i just tried, it works fine! If you need a specific color, to be translated in HEXA, I use to visit: #FF3333 couleur hexadécimal #F33

I either type the color at the top of the page, and get loads of possibilities to select as HEXA.
And just paste HEXA : ‘–paper-item-icon-color’: ‘#5F9EA0
It works for all, but shall add ’ ’

So I ended up here as I have a similar issue.

I have 4 “LEDs” on a picture elements card. They are all 4 configured equally but only 1 gives me the correct “active” color. For sake of easiness I only add the correct one and 1 faulty one…

Correct:

        - type: state-icon
          entity: binary_sensor.tuin_klep_uitgang_tuinslang_led
          style:
            top: 40%
            left: 76.5%
            '--paper-item-icon-color': green
            '--paper-item-icon-active-color': green
          tap_action:
            action: call-service
            service: switch.toggle
            target:
              entity_id: switch.tuin_klep_uitgang_tuinslang

Active green, as configured: image
inactive green as configured: image

Incorrect:

        - type: state-icon
          entity: binary_sensor.tuin_klep_uitgang_sprinklers_led
          style:
            top: 63%
            left: 76.5%
            '--paper-item-icon-color': green
            '--paper-item-icon-active-color': green
          tap_action:
            action: call-service
            service: switch.toggle
            target:
              entity_id: switch.tuin_klep_uitgang_sprinklers

Active yellow… but green configured: image
inactive green as configured: image

What can be wrong here?

Since no one has replied and my problem still exists… I have made a gif showing some weird behavior… it’s blue and white a split second?

(again, this used to work before).

color

the code in the card:

    card:
      type: picture-elements
      elements:
        - type: state-icon
          entity: binary_sensor.tuin_klep_ingang_leidingwater_led
          style:
            top: 63%
            left: 22%
            '--paper-item-icon-color': white
            '--paper-item-icon-active-color': white
          tap_action:
            action: call-service
            service: switch.toggle
            target:
              entity_id: switch.tuin_klep_ingang_leidingwater
        - type: custom:text-element
          text: Leidingwater
          style:
            top: 63%
            left: 34%
            color: black
        - type: state-icon
          entity: binary_sensor.tuin_klep_ingang_regenwater_led
          style:
            top: 40%
            left: 22%
            '--paper-item-icon-color': blue
            '--paper-item-icon-active-color': blue
          tap_action:
            action: call-service
            service: switch.toggle
            target:
              entity_id: switch.tuin_klep_ingang_regenwater

The code of the binary sensors:

      tuin_klep_ingang_leidingwater_led:
        value_template: >-
          {% if is_state('switch.tuin_klep_ingang_leidingwater', 'on') %}
            on
          {% else %}
            off
          {% endif %}
        icon_template: >-
          {% if is_state('switch.tuin_klep_ingang_leidingwater', 'on') %}
            mdi:radiobox-marked
          {% else %}
            mdi:radiobox-blank
          {% endif %}
        unique_id: 67692203-819e-4212-af0d-00289737d6ee

      tuin_klep_ingang_regenwater_led:
        value_template: >-
          {% if is_state('switch.tuin_klep_ingang_regenwater', 'on') %}
            on
          {% else %}
            off
          {% endif %}
        icon_template: >-
          {% if is_state('switch.tuin_klep_ingang_regenwater', 'on') %}
            mdi:radiobox-marked
          {% else %}
            mdi:radiobox-blank
          {% endif %}   
        unique_id: d49f62bb-f207-4b56-ab49-b30c115a8137

Adding state_color: false in picture elements card solved the issue… some override of the default yellow color?

Example:

card:
      type: picture-elements
      elements:
        - type: state-icon
          entity: binary_sensor.tuin_klep_ingang_leidingwater_led
          state_color: false # <---- HERE
          style:
            top: 63%
            left: 22%
            '--paper-item-icon-color': white
            '--paper-item-icon-active-color': white
          tap_action:
            action: call-service
            service: switch.toggle
            target:
              entity_id: switch.tuin_klep_ingang_leidingwater
        - type: custom:text-element
          text: Leidingwater
          style:
            top: 63%
            left: 34%
            color: black
        - type: state-icon
          entity: binary_sensor.tuin_klep_ingang_regenwater_led
          style:
            top: 40%
            left: 22%
            '--paper-item-icon-color': blue
            '--paper-item-icon-active-color': blue
          tap_action:
            action: call-service
            service: switch.toggle
            target:
              entity_id: switch.tuin_klep_ingang_regenwater