šŸ„custom : mushroom chips card background color

Configuration Frontend
1

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

2

How were you able to change the card background color?

3

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:

4

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.

5

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:

6

Thanks for that

1 Like
7

Took me awhile to figure it out, so i thought id share my approach.

        card_mod:
          style: |
            ha-card {
                border: var(--supplies-button-border) !important;
                justify-content: center !important;
                #--card-mod-icon: mdi:mushroom;
              {% if (states(config.entity) == 'on') %}
                --text-color: var(--supplies-button-text-color-on);
                --card-mod-icon-color: var(--supplies-button-text-color-on);
                --chip-background: var(--supplies-button-color-on);
              {% else %}
                --text-color: var(--supplies-button-text-color-off);
                --card-mod-icon-color: var(--supplies-button-text-color-off);
                --chip-background: var(--supplies-button-color-off);
              {% endif %}
            }
8

There are two main threads for Mushroom Cards, no need to revive an old thread.

Check these outā€¦

1 Like
9

Sorry, but this is the page that my questions brought me too, not the others, so i figured it was most relevant here. Why not delete or merge the thread if we are expected to ignore this one.

10

I was simply providing you a larger audience with links to the main threads. Ome of threads I shared has an extensive Mushroom guide that includes styling Mushroom Chip cards.

11

Thanks, I do appreciate that.