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.
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.
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
And everything is broken again by the latest updates.
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:
inactive green as configured:
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:
inactive green as configured:
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).
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