Mushroom Chips Card icon colour change

Configuration Frontend
1

Hi,
I have seen some other topics on this subject, but I have not been able to use the info in these to get a colour change working. Here’s my code for the chip:

  - type: entity
    entity: sensor.hot_water_temperature
    icon: mdi:thermometer-water
    name: Hot Water
    use_entity_picture: false
    icon_color: |-
      {% set hwstatus = states(sensor.hot_water_state)}
      {% if hwstatus = "On"}
        red
      {% else %}
        black
      {% endif %}

sensor.hot_water_state is a template to pull a nested attribute out of the entity and has the values On or Off. I have tried a few syntax options without success. Can anyone see what I am doing wrong?

On a side note, whenever I save changes to the yaml, >- gets changed to |- and the line break between the set and if statements gets deleted. Is this related?

Many thanks.

2

Looks like you aren’t properly closing your braces. You have a } ending your first two lines when it should be %}

As for the change between >- and |- you want the second not the first for a block like that.

See this site for why and to play around with the different multi-line styles for YAML.

3

>- and |- seems to be mutually interchangeable just like ' and " so that is probably not it.
The rearranging of the lines happens all the time and it should have no general impact, except when you want to set or remove extra line break in the output, which is not the case here.

I can’t seem to find an attribute called icon_color. Where did you find the documentation on that?

4

Thanks all.

icon_color seems to be a standard attribute. Here’s another chip from the same card:

  - type: entity
    entity: switch.bedroom_upright_lamp
    name: Bedroom
    icon: mdi:lightbulb
    icon_color: blue

I tried changing the braces to %}, but that didn’t seem to help.

5

Ahh, found it.

But it looks like it is only a string and it might not be templateable (if that work exist :smiley: )

6

Perhaps that’s the problem. The same(ish) question has been asked on other threads:

And there were a lot of suggestions, but I have not been able to make them work.

7

I use card_mod for that, but I do not know how mushroom cards react with that.
You could test it.

8

If you use a template chips card, you can change the icon color with a template, this is one of mine:

  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: sensor.toilet_current_temperature
        icon: mdi:thermometer
        icon_color: >-
          {% if states ('sensor.toilet_state') == "ON" %}
            red 
          {% endif %}
        content: '{{ states ("sensor.toilet_current_temperature") }}°C'
1 Like
9

Just noticed that to do a compare the OP used a = instead of ==

10

@jbarrett-fmad There are two main mushroom threads

11

I was complexed by this as well. Like WallyR, I used card_mod to change icon state color.

card_mod:
    style: |
      ha-state-icon {
        color:
          {% set hwstatus = states(sensor.hot_water_state)}
          {% if hwstatus = "On"}
            red
          {% else %}
            black
          {% endif %}
12

Did you review any of the posts in the main Mushroom threads before resurrecting a two year old thread?

13

I found a lot of examples how to set the icon_color to red, green or any other color,
but I could not find any example how to set the color the a theme color.

My question is, how to use theme colors in mushroom-chips-card?

icon_color: red
icon_color: green

are all working fine,
but

icon_color: var(--state-icon-color)

does not work.

14

yes the

icon_color: var(–state-icon-color)

something like this is exactly what i’m looking for. has there been a solution for theme styled on/off state color update for the icon?

15

I found a solution here via card_mod but I’m still wondering why the mushroom icon_color does not accept a theme color.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: update.home_assistant_supervisor_update
    icon: mdi:mushroom
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        --color: var(--state-icon-color) !important;
      }
16

You are pre-defining the icon color with this line icon_color: red

Test out :arrow_down:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: update.home_assistant_supervisor_update
    icon: mdi:mushroom
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
      color:  var(--ha-color-focus) !important;
      }

image
image1245×575 43 KB

17

I don’t know what the focus color is.

I can see: fill: var(--icon-primary-color, currentcolor);
with icon-primary-color not defined
and current color as orange (#F36D00).

My original question was, why I need card_mod to assign a theme color for a mushroom card.

Instead of:

chips:
  - type: template
    icon_color: '#44739e'

I tried this, but it’s not working.

chips:
  - type: template
    icon_color: var(--state-icon-color)

Altough all my theme colors are working in other cards, they do not work in Mushroom cards without using card_mod.

I have no problem using card_mod, I just want to understand the background why Mushroom cards are different.

18

It was an example of a standard theme color. I’d suggest reviewing the code…

Mushroom alters and renames quite a few of the standard theme colors

You can also view the colors for a specific card element in Chrome’s DevTool

Theme customization

If you want more information about themes, check out the official Home Assistant documentation about themes.

For example the standard color defined in mushroom for a light is orange:
--rgb-state-light: var(--mush-rgb-state-light, var(--rgb-orange))

for a fan it’s green:
--rgb-state-fan: var(--mush-rgb-state-fan, var(--rgb-green))

Card mod is not needed for the fix. Referencing Mushroom’s color code changes in your theme will address your issue.

1 Like