How to change icon color

Configuration Frontend
4
6

Place it into triple “`” (right below ESC).

7

Assuming your code is an entities card, then this is the working code with one of my sensors.

type: entities
entities:
  - entity: sensor.kodi_cpu_temp
    name: Mode
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: 
            {% if states(config.entity) | float(0) <= 50 %}
              var(--paper-item-icon-color);
            {%else%}
              red;
            {% endif %}
        }

image

If it is a different card type then this will not work obviously.

8

Suggest you to not use this syntax (and not advise it).

type: entities
entities:
  - entity: sensor.kodi_cpu_temp
    name: Mode
    card_mod:
      style: |
        :host {
          {% if ... -%}
          --paper-item-icon-color: green;
          {%- else -%}
          --paper-item-icon-color: red;
          {%- endif %}
        }

More flexible. Less space in DOM.
P.S. Happy NY btw. Although it started with attacks from russians & hamas.

9

I know you did and I intentionally did not follow you because it is not the final code for @broekieman.and his code is formated that way so it is easier for him to compare and adjust.

1 Like
10

Agree. But we should “direct” beginners to better ways. As we were ourselves some time ago.

11

btw - this will not work.

--paper-item-icon-color: var(--paper-item-icon-color);

if no need to change the variable - just do not change.

12

Really? It seems to work because it was the original icon color in my tests, but maybe because it is not understood :slight_smile:

13

check this similar

14

Then, indeed, you’re right, as there should be no code to keep the original color, then it is better to use the full syntax:

type: entities
entities:
  - entity: sensor.duco_ventilation_mode
    name: Mode
    card_mod:
      style: |
        :host {
          {% if ... -%}
          --paper-item-icon-color: red;
          {%- endif %}
        }
15

right, w/o assigning the current value.

16

This is my card :slight_smile:

type: glance
entities:

  • entity: binary_sensor.sensor_badkamer_occupancy
    name: Zone
    icon: mdi:motion-sensor

  • entity: sensor.duco_ventilation_mode
    name: Mode
    card_mod:
    style: |
    :host {
    {% if states(config.entity) == ‘Perm.High’ %}
    –paper-item-icon-color: red;

        {% endif %};
    }
17

Can anyone help me to change color to Red when mode is Perm high?

18

Your code is unreadable, it is difficult to help you.

The solution is in front of your eyes in post #12, you are not using the right tag.
it is
--paper-item-icon-color: red;
not
–paper-item-icon-color: red;

But might be a different issue, but impossible to tell as the indentation is screwed up not using the code formating.

19

Must have gone wrong with paste. I have:

        --paper-item-icon-color: red;

This did not solve the problem. What can I try more?

20

As it was already suggested - fix your post first.
Can’t you see yourself that it is unreadable?

1 Like
21

I’m willing to help, I’m using an input_text helper to simulate your config

type: glance
entities:
  - entity: input_text.a_qui_le_tour
    icon: phu:duco-logo
    name: Mode
    card_mod:
      style: |
        :host {
          {% if states(config.entity) == 'Perm.High' %}
            --paper-item-icon-color: red;
          {% endif %}
        }

As a result,when it is “Perm.High”:
image
And when it is not
image
But next time, try to format your code.

22

How do I Format my Code? This is still not working.

23

Select the code part, the click the </> here
image