Mushroom entity card - change icon color depending the value

Third party integrations
1

I have a problem with changing the color of the mushroom entity card icon depending on the value of the sensor. At this stage, the icon is white all the time. This is where I got stuck. Any help is welcome.

type: horizontal-stack
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.waqi_centar_skopje_macedonia_tsentar
    name: Центар
    icon_color: >-
      {% if (states["sensor.waqi_centar_skopje_macedonia_tsentar"].state < 80)
      -%} 
        green 
      {%- else -%} 
        red 
      {%- endif %}
  - type: custom:mushroom-entity-card
    entity: sensor.waqi_gazi_baba_skopje_macedonia_gazi_baba
    name: Гази Баба
  - type: custom:mushroom-entity-card
    entity: sensor.waqi_karposh_skopje_macedonia_karposh
    name: Карпош
2

try

{{ (states("sensor.waqi_centar_skopje_macedonia_tsentar")|float(0) < 80) | iif("green", "red") }}
3 Likes
3

Thanks for the response.
It didn’t work, the icon is changing to white. Beginning to think it is not possible in the mushroom entity card.

4

Hello, I have exactly the same problem, but only with binary sensor.
No issue with other sensor type.

6

I think it’s because you can only do this in a template card. Try remaking it as one of those with the same template in the icon_color bit.

1 Like
7

I give up on mushroom entity and made it all in custom:button-card

8

the entity card dosn’t appear to support templates in the icon field.

lovelace-mushroom/entity.md at main · piitaya/lovelace-mushroom (github.com)

you can use the template card instead as @pjn77 says.

1 Like
9

you can use templating only with custom:mushroom-template-card
it won’t work with other mushroom cards

4 Likes
10

@11125 - You can use templating to change the icon color of the custom:mushroom-entity-card card, by using it under the custom:config-template-card card.

type: 'custom:config-template-card'
variables:
  TEMPERATURE: states['sensor.waqi_centar_skopje_macedonia_tsentar'].state
entities:
  - sensor.waqi_centar_skopje_macedonia_tsentar
card:
  type: custom:mushroom-entity-card
  entity: sensor.waqi_centar_skopje_macedonia_tsentar
  name: Центар
  icon_color: "${TEMPERATURE < 80 ? 'green' : 'red'}"
8 Likes
11

I wish to tackle a similar topic:
I have at entity “light.schalter_hausturlicht_1_ch8” an attribute color holding the color as text

color attribute
color attribute1544×521 47.4 KB

How can I make use of this information to color the icon in custom:mushroom-alarm-control-panel-card according to the color of the entity?

At template editor I can see following output:

'{{ states.light.schalter_hausturlicht_1_ch8.attributes.color }}' -> string 'GREEN'
{{ state_attr('light.schalter_hausturlicht_1_ch8', 'color') }} -> string GREEN

Can I make use of it direclty in custom:mushroom-alarm-control-panel-card or do I need to use it by custom:config-template-card?

type: custom:config-template-card
entities:
  - light.schalter_hausturlicht_1_ch8
template: |
  <ha-icon 
    style="icon_color: {{ state_attr('light.schalter_hausturlicht_1_ch8', 'color') }}" 
    icon="mdi:lightbulb"></ha-icon>
card:
  type: custom:mushroom-alarm-control-panel-card
  states:
    - armed_home
    - armed_away
    - armed_vacation
  layout: vertical
  entity: alarm_control_panel.alarmo
  name: Alarmanlage

Sorry, in case it is a stupid question, but I just started with template capbilities of HA…

Best regards, Bastian

13

you have to take the mushroom-template-card ;o)

14

Thank you, yours was exactly what I needed to change the icon depending on a state for the current being used for a smart plug.

15

you have to use mushroom-template-card. With mushroom template card, I can config the icon color and badge color and appearance. Here is my config which change the color of icon and badge. You can also config show or no show the badge according to the state.

type: custom:mushroom-template-card
primary: ''
secondary: ''
entity: light.moes_4_gangs_light
icon: mdi:chef-hat
badge_icon: mdi:lightbulb
icon_color: |-
  {% if is_state('light.moes_4_gangs_light', 'on') %}
    amber         
  {% elif is_state('light.moes_4_gangs_light', 'off') %}

  {% endif %}
badge_color: |-
  {% if is_state('light.moes_4_gangs_light', 'on') %}
    amber         
  {% elif is_state('light.moes_4_gangs_light', 'off') %}

  {% endif %}
2 Likes
16

Thankyou, this solved my issue with trying to change the icon colour in a mushroom template card!

17

worked for me as well, just basically replaced the whole icon_color: line with this section

icon_color: |-
  {% if is_state('light.moes_4_gangs_light', 'on') %}
    amber         
  {% elif is_state('light.moes_4_gangs_light', 'off') %}

  {% endif %}

and changed the entity name and color to suit

18

Hello,
I would like the value of my house consumption to appear in yellow if the solar power is insufficient and in green if there is sufficient solar power. However, the way I have configured it, the green font is always used. I have already swapped the order, but always without success :frowning:
Does anyone have any tips for me?

type: custom:button-card
name: Hausverbrauch (W)
entity: sensor.hausverbrauch
state_display: '[[[ return Math.round(entity.state) + "" ]]]'
margin: none
show_name: false
icon: mdi:home-lightning-bolt-outline
show_icon: true
show_state: true
size: 40%
styles:
  card:
    - border-radius: 10px
    - aspect-ratio: 1/1
    - box-shadow: none
    - font-size: 300%
    - font-weight: bold
    - background-color: '#000000'
  name:
    - font-size: 0%
    - font-weight: normal
    - color: '#C1BFBE'
    - align-self: top
state:
  - value: states('sensor.pv_power_alle_anlagen')
    operator: ''
    styles:
      card: null
      state:
        - color: yellow
  - value: states('sensor.pv_power_alle_anlagen')
    operator: <
    styles:
      card: null
      state:
        - color: green
  - value: 0
    operator: '=='
    styles:
      card:
        - background-color: '#000005'
      state:
        - color: '#605D5C'
      name:
        - color: '#C1BFBE'

PS: Another problem in this context: I have tried several times to enter the operator correctly. Sometimes ‘<’, sometimes only as < and of course also with ‘>’ and >. When saving, either the ’ is removed or the operator inside the ’ '. But only in one of the statements at a time.

19

i love this approach, but when i use an == with an on/off it only works on on.

type: 'custom:config-template-card'
variables:
  ON_SWITCH: states['input_boolean.basic_toggle'].state
entities:
  - input_boolean.basic_toggle
card:
  type: custom:mushroom-entity-card
  entity: input_boolean.basic_toggle
  name: toggle
  icon_color: "${ON_SWITCH == 'on' ? 'green' : 'red'}"

so this code now only shows green on on. and grey on off…
but when i enter ON_SWITCH==‘off’ it stays all grey

20

i see in my code i needed to use === but still the outcome is the same problem

21

I got the same result as well.

Unfortunately I think it might be a limitation of the Mushroom Card that you can only change the “on” icon color.

22

Hi everyone, I’m trying to change the color of this card, I’m trying but I can’t, the states are ‘on’ and ‘off’ simple what am I doing wrong? thanks again for the help p.s. on = green off = red I know there is no string for red color

type: custom:mushroom-entity-card
entity: binary_sensor.lxc_nextcloud_101_stato
icon_color: |-
  {% if is_state('binary_sensor.lxc_nextcloud_101_stato', 'on') %}
   green
  {% endif %}