Color Picture-item-icon How can I change the on color of my state icons

Configuration Frontend
21

if you want to change the icon color for a particular entity independent of its state, you could try it with something like this:

–sensor.binary_sensor-on-color: yourcolor;
–sensor.binary_sensor-off-color: yourcolor;

using the same color for on AND off state…

22

I want the icon color to change based on state, i.e the color be default (standard bluish) but to different color (yellow or orange) when state changes so I tried your solution for my card:

type: entities
entities:
  - entity: binary_sensor.bsh_connected
    name: Diswasher Wifi connection
    state_color: false
    style: |
      :host {
        –sensor.binary_sensor-on-color: orange;
        –sensor.binary_sensor-off-color: blue;
      }

nothing changing :frowning: I’m sure very minor issue that I’m not getting :frowning:

23

ok. so this is a binary sensor?
what device_class is it?

What exactly do you want to acheive?
Within the theme file you can set the state colors for all entities that are binary_sensors and that particular device_class…

here’s the documentation how to use these…

please provide a bit more, clear information that will be easier to provide support for your case.

24 
device_class: home_connect_alt__settings
icon: mdi:tune
friendly_name: Bosch Dishwasher - Power State

is what I can see in the development tools>states
image
As you can see that it is changing states but don’t know how to simply change the color of the icon to orange based on these states just like the sensor above
image

This sensor is created using HACS for homeconnect for my Bosch dishwasher

I’ve tried an alternate solution on another sensor. However, my preferred option is to to know how to get the above one work ?

image

      - entity: binary_sensor.tp_link_router_wan_status_2
        name: Wan status
        state_color: false
        style: |
          :host {
            {% if states(config.entity)=='on' %}
              --paper-item-icon-color: red;
            {% endif %};
          }

Now with new format what do you propose should I use instead of --paper-item-icon-color: red;
that it would be compatible ? as --rgb-state-sensor-color: var(--rgb-red-color); didn’t work :frowning:
The device_class of this sensor is device_class: connectivity

25

have you read the documentation which I have linked above?

you can use the following in your themes.yaml:

state-binary_sensor-connectivity-on-color: '#FF9800' # Orange
state-binary_sensor-connectivity-off-color: '#2196F3' # Blue

State Colors with ‘default’ settings for binary sensors:
grafik

state colors after applying the above colors for binary sensors with device class connectivity:
grafik

26

I got your theme solution, but I don’t want to apply these changes at themes level instead want it at card level.
Any tweak to card code would be helpful

27

I haven’t used card_mod on entities except on tiles…

card_mod:
  style: |
    .tile
      {
        {% if is_state('sensor.griffsensor_terrassentur_state', 'closed') %}
          --tile-color:var(--green-color);
        {% elif is_state('sensor.griffsensor_terrassentur_state', 'open') %}
          --tile-color:var(--red-color);
        {% elif is_state('sensor.griffsensor_terrassentur_state', 'tilted') %}
          --tile-color:var(--orange-color);
        {% endif %}
      }

Therefore, I cannot provide any option on how to change the icon colors within your card - if you are using entities card or whatever else.

personally, I would prefer the themed option, because then the state_colors are the same for the same device_classes … so all “connectivity” sensors would be red if offline and green when online.
That would make most sense - except in some very rare exceptions where the state might be “inverted”

Anyway - sorry that I cannot provide help on changing the colors only on card level.
You should probably ask that in the Card_mod section here in the forum directly.