Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[Halover99 (HAlover)]

Ciao Rhysb,

I’m using your configuration for climate-card all works fine but there is no appear the badge icon.
Could you help me please?

  - type: custom:mushroom-climate-card
    entity: climate.fujitsu
    name: Condizionatore
    show_temperature_control: true
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - fan_only
      - dry
    card_mod:
      style: |
        mushroom-shape-icon {
          --card-mod-icon: 
          {% if is_state(config.entity, 'heat_cool') %}
            mdi:autorenew
          {% elif is_state(config.entity, 'heat') %}
            mdi:fire
          {% elif is_state(config.entity, 'cool') %}
            mdi:snowflake
          {% elif is_state(config.entity, 'dry') %}
            mdi:water-percent
          {% elif is_state(config.entity, 'fan_only') %}
            mdi:fan
          {% else %}
            mdi:air-conditioner 
          {% endif %};
          display: flex;
          {% if is_state(config.entity, 'fan_only') %}
            animation: rotation 1s linear infinite;
          {% endif %}
        }
        @keyframes rotation {
          100% {
             transform: rotate(360deg);
          }
        }

Thanks!

[Faecon (Jo)]

Is it possible to get the icon the colour of an attribute from an entity ?

the colour of a light changes depending of time. so I want to see the colour changed of the icon. Is that possible ?

[dimitri.landerloos]

Do you mean the borders around the cards or the color of the buttons?

The borders around the card come from your theme. Or more likely your lack of a theme. Some themes dont have a border so that wouldnt show then.

If you dont want to use a different theme then you can fix it with css.

Just add:

ha-card {
  border: none !important;
}

To every card. Including stack in cards.

The button colors come from this (and the others like it below):

      ha-card .mode-item.active.heat { 
        background: #472421;
        color: #f44336;
      }

So just change them to whatever color you want

[dimitri.landerloos]

Asking the same question twice is not going to get you an answer quicker.

But what would help is posting the code that you have already tried and explaining what exactly isnt working as you would expect.

Since the original post, a number of things have changed. But you can definitely get everything this does to work still.

If you arent getting any pop-ups have you checked if you have browser mod installed?

[dimitri.landerloos]

You cannot change the built in history card very much unfortunately. Trust me i have tried…

The top card in that post is the “hourly weather card” from HACS. but it only works with weather entities.

I know no way of showing the state history in a nice mushroom format unfortunately… i would love something like that too.

[MrGrey]

@muktheo

“breathing/dancing”

I’ve witnessed two things help with this (sometimes).

1. Make sure unused actions are set to “No action”. If you’re not using “Hold” or “Double tap” then don’t leave them at “Default action”.

2. Use transition: all 0s; within ha-card. For example:

ha-card{
   ...
   transition: all 0s;
}

I’ve seen both of these make a very noticeable difference under “some” circumstances.

Cheers!

MrGrey.

[FedeL16 (Federico)]

wonderful! sigh!

i have tried many times too of course without a good result. Uptime card now is the best solution.

let me know if you obtain a good history card.

thank you and merry Xmas

[dimitri.landerloos]

I get a badge. You sure its not just the state your entity is in? Have you tested if it gets a badge with the unmodified mushroom climate card?

[dimitri.landerloos]

For this specific card? Or just in general.

In general you can get the light color if you use the light card by default:

type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
use_light_color: true

If you dont want to use the light card and you want use the card provided for example then you can get the lights ‘rgb_color’ attribute and use it like this:

Full Card Code

type: custom:mushroom-template-card
entity: light.lounge_lights
icon: |-
  {% if expand(states.light) 
    |selectattr('state', 'eq', 'on') 
    |selectattr('entity_id', 'in', area_entities('Lounge'))
    |map(attribute='entity_id')
    |list | count > 1
  %}
    mdi:lightbulb-multiple
  {% else %}
    mdi:lightbulb
  {% endif %}
icon_color: |-
  {% if expand(states.light) 
    |selectattr('state', 'eq', 'on') 
    |selectattr('entity_id', 'in', area_entities('Lounge'))
    |map(attribute='entity_id')
    |list | count > 0 
  %}
    {{"#%02x%02x%02x" % state_attr(config.entity, 'rgb_color')}}
  {% else %}
    disabled
  {% endif %}
card_mod:
  style: |
    ha-state-icon::after {
      content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Lounge')) |rejectattr('entity_id', 'search', 'master') |map(attribute='entity_id') |list | count }}';
      position: absolute;
      top: -11%;
      right: -11%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 15px;
      height: 15px;
      font-size: 9px;
      font-weight: 700;
      {% if expand(states.light) 
        |selectattr('state', 'eq', 'on') 
        |selectattr('entity_id', 'in', area_entities('Lounge'))
        |rejectattr('entity_id', 'search', 'master')
        |map(attribute='entity_id')
        |list | count > 0 
      %}
        background-color: rgba{{state_attr(config.entity, 'rgb_color') + (0.5,)}};
      {% else %}
        background-color: rgba(var(--rgb-disabled), 0.5);       
      {% endif %}
      border-radius: 50%;
    }

This bit changes the background of the “badge”

background-color: rgba{{state_attr(config.entity, 'rgb_color') + (0.5,)}};

And this bit sets the icon color:

{{"#%02x%02x%02x" % state_attr(config.entity, 'rgb_color')}}

It just converts the rgb_color value to hex.

[Faecon (Jo)]

thanks for the reply.

I want to change the colour of the “5” and the little circle in your example, at home it is an icon… So it is the badge code.
Thanks

[dimitri.landerloos]

@dimitri.landerloos

Full Card Code

Check this bit in the post. It does what you ask.

[Halover99 (HAlover)]

what you mean? i don’t understand.
the configuration applied is posted on previous post.

[dimitri.landerloos]

Yes, but try and put your climate entity in an unmodified climate card. Then see if there is a badge.

[Halover99 (HAlover)]

i don’t undestand what you mean…

[dimitri.landerloos]

Does it have a badge if you just use this:

type: custom:mushroom-climate-card
entity: climate.fujitsu

[Airyphyla]

Fair enough, thanks for replying. I’ve pasted the code directly from the example, and i have created a group for the lights. Im not seeing the red dot indicating something is on, and also the bell, when i click it, is not explanding and showing open doors, lights on, alarm etc. Yes i have browser mod installed.

[Legnava89 (Dušan)]

Hello, please how to set when the sensor sensor.pv_power is greater than 10 W so that the solar panel animation icon turns on?
Thank you very much in advance for your time and ideas.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.pv_power
    icon: mdi:solar-power-variant
    icon_color: |-
      {% if is_state("sensor.pv_power", "0") %}
                  blue
                {% else %}
                  orange
                {% endif %}
    content: '{{ states("sensor.pv_power") }} W'
    tap_action:
      action: more-info
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: >
      ha-state-icon {
        {{ 'animation: rays 2s infinite;' if is_state('sensor.pv_power', '> 10') }}
      }

      @keyframes rays {

      0%, 100% { clip-path: inset(0 0 0 0); }

      80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41%
      31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%,
      71% 42%, 87% 47%); }

      }

[dimitri.landerloos]

Either like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.pv_power
    icon: mdi:solar-power-variant
    icon_color: |-
      {% if is_state('sensor.pv_power', "0") %}
        blue
      {% else %}
        orange
      {% endif %}
    content: '{{ states("sensor.pv_power") }} W'
    tap_action:
      action: more-info
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {{ 'animation: rays 2s infinite;' if states('sensor.pv_power') | float > 10 }}
      } 
      @keyframes rays {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41%
        31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%,
        71% 42%, 87% 47%); }
      }

Or like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.pv_power
    icon: mdi:solar-power-variant
    icon_color: |-
      {% if is_state('sensor.pv_power', "0") %}
        blue
      {% else %}
        orange
      {% endif %}
    content: '{{ states("sensor.pv_power") }} W'
    tap_action:
      action: more-info
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if states('sensor.pv_power') | float > 10 %}
          animation: rays 2s infinite;
        {% endif %}
      } 
      @keyframes rays {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41%
        31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%,
        71% 42%, 87% 47%); }
      }

[Legnava89 (Dušan)]

Yes, all variants work.
Thank you very much.

[Foltifeki]

Hello

I would like to set it so that the color of the leaf changes based on the quality of the air

I don’t know how to set it and what values it should change to (based on what it changes in our home app)

Thanks in advance for your help :3