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

[jalejandro0211 (Alejandro Arias)]

@LeiChat

card_mod:
  style: |
    mushroom-shape-icon {
        {{ '--icon-animation: pulse 3s linear infinite;' if is_state('sensor.myenergi_zappi_plug_status', 'Charging') }}
    }
    :host {
        --mush-card-primary-font-size: 16px;
        --mush-card-secondary-font-size: 13px;
    }

You have to change some lines:
this

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {

by this

card_mod:
  style: |
    mushroom-shape-icon {

example:

type: custom:mushroom-template-card
primary: 'Music #1'
icon: mdi:music
icon_color: blue
card_mod:
  style: |
    mushroom-shape-icon {
        --icon-animation: music 2s ease-in-out infinite alternate;
        transform-origin: 50% 100%
      }
      .shape {
        perspective: 7px;
      }
      @keyframes music {
        0%, 100% { transform: translateY(0px) scaleX(1); }
        20% { transform: translateY(2px) scaleX(0.9); }
        40% { transform: rotateY(10deg) rotateZ(-10deg); }
        60% { transform: translateY(-4px) scaleX(1.1); }
        80% { transform: rotateY(-10deg) rotateZ(10deg); }
      }

[iC1Beaver (Fred)]

I am using the exact same thing for chips but I get:

Visual editor is not supported for this configuration:

• At path: chips.0.card_mod – Expected a value of
  type never, but received: null

You can still edit your config in YAML.

Any idea why?

[dyfcom (Tetra)]

Hey, I want to change the Icon color based on the theme that is enabled. In the bar-card I use:

type: custom:bar-card
entity: sensor.percentofyear
color: var(--app-header-background-color)

but this is not working. As example, the entity-card:
(Edit: I see, icon_color only excepts a string)

type: custom:mushroom-entity-card
entity: sensor.time_correct
fill_container: false
layout: horizontal
primary_info: state
secondary_info: none
icon_color: var(--app-header-background-color)

I can’t get it to work via style in ha-card because I don’t know what to change.

Is there possibly an option to set the primary icon colour as a global option?

Thanks!

[LeiChat (Richard)]

I’m using Microsoft Edge, perhaps it’s supported by that and not other browsers?

[TMidi]

I have tried to use your code, but I am getting the card with the door and keypad side by side . How do I get them stacked one upon the other? For the Ford Raptor door card, are you just withholding the second card in the original template?

[RASBR (Rami)]

Hi @dimitri.landerloos
I tried changing ha-icon to ha-states-icon and refreshing the page with clear cache but it didn’t work. below the original yaml:

type: grid
square: false
columns: 1
cards:
  - type: custom:mushroom-title-card
    title: Pool
  - square: false
    columns: 2
    type: grid
    cards:
      - type: custom:mushroom-template-card
        entity: switch.pool_tank_valve
        primary: Faucet
        icon: '{{ ''mdi:waves'' if is_state(entity, ''on'') else ''mdi:faucet'' }}'
        icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
        badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
        badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {{ '--icon-animation: clip 2s ease-out infinite;' if is_state(config.entity, 'on') }}
              }
              @keyframes clip {
                0% {clip-path: inset(75% 0 0 0); }
                100% { clip-path: inset(0 0 0 0); }
              }
      - type: custom:mushroom-template-card
        entity: switch.pool_filter_pump
        primary: Filter
        icon: none
        icon_color: ''
        badge_color: ''
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
                border-radius: 50%;
                {{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
              }
              .shape {
                {{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
                {{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
                --shape-color: none;
                --icon-symbol-size: 5px;
                --icon-size: 34px; 
              }
      - type: custom:mushroom-template-card
        entity: switch.pool_stairs_jet_1_pump
        primary: Jet 1
        icon: none
        icon_color: ''
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
                border-radius: 50%;
                {{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
              }
              .shape {
                {{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
                {{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
                --shape-color: none;
                --icon-symbol-size: 5px;
                --icon-size: 34px; 
              }
      - type: custom:mushroom-template-card
        entity: switch.pool_heating_pump
        primary: Heating
        icon: none
        icon_color: ''
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
                border-radius: 50%;
                {{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
              }
              .shape {
                {{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
                {{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
                --shape-color: none;
                --icon-symbol-size: 5px;
                --icon-size: 34px; 
              }
      - type: custom:mushroom-template-card
        primary: Waterfall
        icon: mdi:waterfall
        icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
        entity: switch.pool_waterfall_pump
        secondary: ''
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {{ '--icon-animation: clip 1s ease-out infinite;' if is_state(config.entity, 'on') }}
              }
              @keyframes clip {
                0% {clip-path: inset(0 0 80% 0); }
                100% { clip-path: inset(0 0 0 0); }
              }
      - type: custom:mushroom-template-card
        entity: switch.pool_jet_2_pump
        primary: Jet 2
        icon: none
        icon_color: ''
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
                border-radius: 50%;
                {{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
              }
              .shape {
                {{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
                {{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
                --shape-color: none;
                --icon-symbol-size: 5px;
                --icon-size: 34px; 
              }
      - type: custom:mushroom-entity-card
        entity: light.pool_white_lights
        name: White
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        icon_color: white
        secondary_info: none
      - type: custom:mushroom-entity-card
        entity: light.pool_color_lights
        name: Color
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        icon_color: white
        secondary_info: none
      - type: custom:mushroom-entity-card
        entity: light.pool_blue_lights
        name: Blue
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
        icon_color: white
        secondary_info: none
  - square: false
    columns: 1
    type: grid
    cards:
      - type: custom:mushroom-title-card
        title: Elevator Well
      - square: false
        columns: 2
        type: grid
        cards:
          - type: custom:mushroom-template-card
            entity: switch.elevator_well_pump
            primary: Pump
            icon: none
            icon_color: ''
            card_mod:
              style:
                mushroom-shape-icon$: |
                  ha-icon {
                    {{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
                    border-radius: 50%;
                    {{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
                  }
                  .shape {
                    {{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
                    {{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
                    --shape-color: none;
                    --icon-symbol-size: 5px;
                    --icon-size: 34px; 
                  }
          - type: custom:mushroom-template-card
            entity: light.elevator_well_light
            primary: Light
            icon: mdi:lightbulb-on
            icon_color: '{{ ''amber'' if is_state(entity, ''on'') else ''disabled'' }}'
            card_mod:
              style:
                mushroom-shape-icon$: |
                  ha-icon {
                    {{'--icon-animation: illumination 2s infinite;' if is_state(config.entity, 'on') }} 
                  }
                  @keyframes illumination {
                    0%, 100% { clip-path: inset(0 0 0 0); }
                    80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
                  }
view_layout:
  grid-area: col1

There are more screen, but this is one of them.

Please accept my sincere thanks for taking the time to look into this.

[MNL]

Can someone help me with this? After the 3.0x update, I don’t get my animation running again. I tried to change ha-icon by ha-state-icon and mushroom-state-icon. Even tried to change the code like @LeiChat wrote in his post, but unfortunately no animation.

Original code which was working before update:

type: custom:mushroom-template-card
icon: mdi:fan
entity: switch.ventilator
tap_action:
  action: toggle
icon_color: '{{ ''green'' if is_state(''switch.ventilator'', ''on'') else ''grey'' }}'
primary: Ventilator
secondary: '{{ states(entity) | title }}'
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style:
    mushroom-shape-icon$: |
      {% if is_state('switch.ventilator','on') %}
      ha-icon {
        --icon-animation: spin 1s linear infinite;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }
      {% else %}

      {% endif %}
      }

After trying changing ha-icon to ha-state-icon or mushroom-state-icon, I tried this too, but no animation.

type: custom:mushroom-template-card
icon: mdi:fan
entity: switch.ventilator
tap_action:
  action: toggle
icon_color: '{{ ''green'' if is_state(''switch.ventilator'', ''on'') else ''grey'' }}'
primary: Ventilator
secondary: '{{ states(entity) | title }}'
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style: |
    ha-state-icon {
      {{ '--icon-animation: spin 1s linear infinite;' if is_state('switch.ventilator','on') }}
    }
    @keyframes shake {
      0%, 100% { transform: translate(0, 0) rotate(0); }
      20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
      40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
      60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
      80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
    }
    @keyframes drum {
      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
    }
    {% else %}

    {% endif %}
    }

Please assist.

[karloslb]

I have the same problem. After the 3.0.1 update the animation doesn’t work. What can I do? Before the update everything worked great.

>     type: custom:mushroom-template-card
>     primary: WC
>     layout: vertical
>     entity: null
>     icon: |-
>       {% if is_state('fan.fan3', 'on')%}
>         mdi:fan
>       {% elif is_state('fan.fan3','off')%}
>         mdi:fan-off
>       {% endif %}
>     icon_color: |-
>       {% if is_state('fan.fan3', 'on')%}
>         blue
>       {% elif is_state('fan.fan3', 'off')%}
>         red
>       {% endif %}
>     fill_container: true
>     tap_action:
>       action: more-info
>     card_mod:
>       style:
>         mushroom-shape-icon$: |
>           ha-icon {
>             {% if is_state('fan.fan2', 'on')%}
>               --icon-animation: spin 1s linear infinite;
>             {%endif%}
>             }
>         mushroom-card: |
>           ha-card { 
>           border: 0px;
>           }

[NuttShell (Max)]

I’m using MS Edge too.

[NuttShell (Max)]

@jalejandro0211

example:

In your example, the icon animation is accessed through the “mushroom-shape-icon” block.
But the mushroom-shape-icon consists of a round shape and the icon itself (“mushroom-shape-icon”+“ha-state-icon”), so you can control the animation of both the shape and the icon separately. For example:

type: custom:mushroom-template-card
primary: 'Music #2'
icon: mdi:music
icon_color: blue
card_mod:
  style: |
    ha-state-icon {
      --icon-animation: music 2s ease-in-out infinite alternate;
      transform-origin: 50% 100%
    }
    @keyframes music {
      0%, 100% { transform: translateY(0px) scaleX(1); }
      20% { transform: translateY(2px) scaleX(0.9); }
      40% { transform: rotateY(10deg) rotateZ(-10deg); }
      60% { transform: translateY(-4px) scaleX(1.1); }
      80% { transform: rotateY(-10deg) rotateZ(10deg); }
    }
    
    mushroom-shape-icon {
      animation: blinker 2s linear infinite;
    }
    @keyframes blinker { 10% { opacity: 0; } }

[karloslb]

i changed the code. see below. Unfortunately, the icon does not rotate axially. what can i do to fix this problem?

  - type: custom:mushroom-template-card
    primary: Vivien
    layout: vertical
    entity: fan.fan2
    icon: |-
      {% if is_state('fan.fan2', 'on')%}
        mdi:fan
      {% elif is_state('fan.fan2','off')%}
        mdi:fan-off
      {% endif %}
    icon_color: |-
      {% if is_state('fan.fan2', 'on')%}
        blue
      {% elif is_state('fan.fan2', 'off')%}
        red
      {% endif %}
    fill_container: true
    tap_action:
      action: more-info
    card_mod: null
    style: |
      ha-state-icon {
        {% if is_state('fan.fan2', 'on')%}
        --icon-animation: spin 1s linear infinite;
        {%endif%}
        }
      }
      ha-card { 
        border: 0px;
        }

[dimitri.landerloos]

Hi @RASBR,
Simplify it down to this instead:

        card_mod:
          style: |
            mushroom-shape-icon {
                {{ '--icon-animation: clip 2s ease-out infinite;' if is_state(config.entity, 'on') }}
            }
              @keyframes clip {
                0% {clip-path: inset(75% 0 0 0); }
                100% { clip-path: inset(0 0 0 0); }
              }

Should now work

[dimitri.landerloos]

Below works. try and build your If statements around this. hard to test those for you when i dont have your entities

card_mod:
  style: |
    mushroom-shape-icon {
        --icon-animation: spin 1s linear infinite;
        @keyframes shake {
          0%, 100% { transform: translate(0, 0) rotate(0); }
          20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
          40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
          60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
          80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
        }
        @keyframes drum {
          50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
        }
    }

[dimitri.landerloos]

You mean that the Fan doesnt spin along the middle?
I have it working with the below code. but yes it doesnt spin from the middle. think this is a problem which was mentioned here:

Blockquote
Same issue here, it even messes with all of the fancy animations.
I found that line-height is to blame.

card_mod: null
style: |
  ha-state-icon {
      --icon-animation: spin 1s linear infinite;
  }
  ha-card { 
    border: 0px;
  }

add your own if statements back of course

[NuttShell (Max)]

@karloslb

    card_mod: null
    style: |

change indent after “style” and delete “null”

type: custom:mushroom-template-card
primary: Vivien
layout: vertical
entity: fan.fan2
icon: |-
  {% if is_state(config.entity,'on') %}
    mdi:fan
  {% elif is_state(config.entity,'off') %}
    mdi:fan-off
  {% endif %}
icon_color: |-
  {% if is_state(config.entity,'on') %}
    blue
  {% elif is_state(config.entity,'off') %}
    red
  {% endif %}
fill_container: true
tap_action:
  action: more-info
card_mod:
  style: |
    mushroom-shape-icon {
     {% if states(config.entity) == 'on' %}
        --icon-animation: spin 0.5s linear infinite;
     {% endif %}
        line-height: 1px;
     }
     ha-card { 
      border-width:0px;
     }

[MNL]

Thanks for your reply. Unfortunately it still doesn’t work. I changed it like this:

type: custom:mushroom-template-card
icon: mdi:fan
entity: switch.ventilator
tap_action:
  action: toggle
icon_color: '{{ ''green'' if is_state(''switch.ventilator'', ''on'') else ''grey'' }}'
primary: Ventilator
secondary: '{{ states(entity) | title }}'
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style: |
    {% if is_state('switch.ventilator','on') %}
    mushroom-shape-icon {
        --icon-animation: spin 1s linear infinite;
        @keyframes shake {
          0%, 100% { transform: translate(0, 0) rotate(0); }
          20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
          40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
          60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
          80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
        }
        @keyframes drum {
          50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
        }
    }

[dimitri.landerloos]

try like this:

card_mod:
  style: |
    mushroom-shape-icon {
        {% if is_state('switch.ventilator','on') %}
        --icon-animation: spin 1s linear infinite;
        @keyframes shake {
          0%, 100% { transform: translate(0, 0) rotate(0); }
          20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
          40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
          60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
          80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
        }
        @keyframes drum {
          50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); 
        }
        {% else %}

        {% endif %}
    }

[dimitri.landerloos]

Hi @zanixmechanix,
Where would you add this in your theme YAML?

[MNL]

Thanks for your help. This solved the problem. The icon is spinning again yay

[NuttShell (Max)]

@karloslb

fan.fan2

card_mod:
  style: |
    mushroom-shape-icon {
      {% if states(config.entity) == 'on' %}
        --icon-animation: rotation 1s linear infinite;
      {%endif%}
        line-height: 0.1rem;
      }
     @keyframes rotation {
       0% {
         transform: rotate(0deg);
       }
       100% {
         transform: rotate(360deg);
       }
     }
     ha-card { 
      border-width:0px;
    }