🍄custom : mushroom chips card background color

Greetings. Looked everywhere for this: I’ve already successfully been able to change icon color based on state (thanks to the community for that!); but would like to, also, be able to change the background as well:
image

Is there a sort of bg_color: |- ... option much like icon_color |- ... ?

Edit: We got it now. Thanks. j

How were you able to change the card background color?

We weren’t! We simply switched from chips to templates, with the icon bg changing color ONLY (not the whole card bg) like everyone else use:
imageimage

This wasn’t what we were looking for, and not sure if this is on the works, but it’s close enough for now! :red_circle:

Did you manage to change the icon colour depending on state in a chip card?

Would you mind sharing, I’ve been trying and can’t get it to work after trying a few different suggested templates.

Sure: Here’s the code for the color coding chips; in this example, the processor use and its thresholds (these levels are what we think they should be, you can change to whatever you want!), that go from bright green (#00ff00), to green, yellow, orange and red depending on usage percentage:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: cover
    icon: mdi:desktop-tower
    icon_color: |-
      {% set state=states('sensor.processor_use') | float() %}
      {% if state<=25 %}
      #00ff00
      {% elif state>=26 and state<=50 %}
      green
      {% elif state>=51 and state<=75 %}
      yellow
      {% elif state>=76 and state<=90 %}
      orange
      {% elif state>91 %}
      red
      {% else %}
      white
      {% endif %}
    hold_action:
      action: none
    tap_action:
      action: navigate
      navigation_path: yourURLhere
    double_tap_action:
      action: none

And here’s the code of the card/tab (not chip) from OP ‘movement’ sensor example:

type: custom:mushroom-template-card
primary: |
  {{ states('sensor.mySensorX_event')}}
secondary: |
  {{ states('sensor.mySensorX_somethingElse')}}
icon: |
  {% set state=states('sensor.mySensorX_event') %}
  {% if state=='MOVING' %}
  mdi:human-greeting
  {% elif state=='Still' %}
  mdi:human
  {% else %}
  mdi:human-handsdown
  {% endif %}
icon_color: |-
  {% set state=states('sensor.mySensorX_event') %}
  {% if state=='MOVING' %}
  orange
  {% elif state=='Still' %}
  #00ff00
  {% else %}
  white
  {% endif %}
tap_action:
  action: navigate
  navigation_path: yourURLhere
hold_action:
  action: none
layout: vertical

Hope that helps! :red_circle:

Thanks for that

1 Like