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

[beurdy]

What am I missing? Trying to get an animated icon, but there is no animation…

Pretty much copied the example code… GOt another icon that doesn’t animate either. So must be doing something fundamentally wrong…

type: custom:mushroom-template-card
primary: Water
icon: mdi:water-pump
icon_color: light-blue
layout: vertical
secondary: >-
  {% if is_state("sensor.watermeterkit_water_meter_kit_current_usage", "0.0") %}
  Off {% else %} {{ states("sensor.watermeterkit_water_meter_kit_current_usage")
  }} {% endif %}
entity: sensor.watermeterkit_water_meter_kit_current_usage
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: drip 2s infinite; 
      }
      @keyframes drip {
        0%, 100% { clip-path: inset(0 0 0 0); }
        15%, 85% { clip-path: polygon(0 0, 100% 0, 100% 57%, 64% 57%, 64% 100%, 0 100%); }
      }

[dimitri.landerloos]

Look at the updated animations. Ive linked to it many times in this thread.

I would recommend searching for keywords and looking from the bottom up in the future.

[Razzer.90]

hello, is it possible to remove the badge from mushroom light cards? unfortunately the solutions i have found do not work and are only for chips cards. thank you!

[dimitri.landerloos]

Badge? the light card doesnt have a badge? can you send a screenshot of what you mean + the code?

[Razzer.90]

  - type: custom:mushroom-light-card
    entity: light.balkon_beleuchtung
    name: Balkon

[dimitri.landerloos]

Oh - that badge is only there because your entity is unavailable so that appears in every card.

but if you want to remove it, sure then just do this with card mod:

type: custom:mushroom-light-card
entity: light.bedroom_chest_lam
card_mod:
  style: |
    mushroom-badge-icon {
      display: none;
    }

[Razzer.90]

@dimitri.landerloos

card_mod:
  style: |
    mushroom-badge-icon {
      display: none;
    }

ty!! works perfect!!!

[jkseamons]

Here is a more detail on what the issue is. The current code looks okay with a dark theme, but not with a light one when the button is on (selected).

This is due to the hard coded colors in this section of the code, but I am not sure what the correct variables are to use to mimic the same colors used in mushroom icon backgrounds.

The variables in question are var(–primary-background-color) for the ha-card section and the background variables for each of the action buttons when selected

    card_mod:
      style: |
        ha-card {
          border-width: 0px;
          background: none;
          --ha-card-box-shadow: 0px;
          --st-spacing: 0px;
          --st-default-spacing: 0px;
          --st-mode-background: var(--primary-background-color);
          margin-left: 12px;
          margin-right: 12px;
          margin-bottom: 12px;
        }
        ha-card .mode-item.active.off { 
          background: #363636;
          color: var(--disabled-color);
        }
        ha-card .mode-item.active.cool { 
          background: #1d3447;
          color: var(--blue-color);
        }
        ha-card .mode-item.active.heat { 
          background: #472421;
          color: var(--red-color);
        }
        ha-card .mode-item.active.heat_cool { 
          background: #493516;
          color: var(--orange-color);
        }

[LiQuid_cOOled]

Mushroom colors go through a series of color settings to create state climate colors.

Last stage

/* State climate colors */
    --rgb-state-climate-auto: var(--mush-rgb-state-climate-auto, var(--rgb-green));
    --rgb-state-climate-cool: var(--mush-rgb-state-climate-cool, var(--rgb-blue));
    --rgb-state-climate-dry: var(--mush-rgb-state-climate-dry, var(--rgb-orange));
    --rgb-state-climate-fan-only: var(--mush-rgb-state-climate-fan-only, var(--rgb-teal));
    --rgb-state-climate-heat: var(--mush-rgb-state-climate-heat, var(--rgb-deep-orange));
    --rgb-state-climate-heat-cool: var(--mush-rgb-state-climate-heat-cool, var(--rgb-green));
    --rgb-state-climate-idle: var(--mush-rgb-state-climate-idle, var(--rgb-disabled));
    --rgb-state-climate-off: var(--mush-rgb-state-climate-off, var(--rgb-disabled));

Second Stage

/* RGB */
    /* Standard colors */
    --rgb-red: var(--mush-rgb-red, var(--default-red));
    --rgb-pink: var(--mush-rgb-pink, var(--default-pink));
    --rgb-purple: var(--mush-rgb-purple, var(--default-purple));
    --rgb-deep-purple: var(--mush-rgb-deep-purple, var(--default-deep-purple));
    --rgb-indigo: var(--mush-rgb-indigo, var(--default-indigo));
    --rgb-blue: var(--mush-rgb-blue, var(--default-blue));
    --rgb-light-blue: var(--mush-rgb-light-blue, var(--default-light-blue));
    --rgb-cyan: var(--mush-rgb-cyan, var(--default-cyan));
    --rgb-teal: var(--mush-rgb-teal, var(--default-teal));
    --rgb-green: var(--mush-rgb-green, var(--default-green));
    --rgb-light-green: var(--mush-rgb-light-green, var(--default-light-green));
    --rgb-lime: var(--mush-rgb-lime, var(--default-lime));
    --rgb-yellow: var(--mush-rgb-yellow, var(--default-yellow));
    --rgb-amber: var(--mush-rgb-amber, var(--default-amber));
    --rgb-orange: var(--mush-rgb-orange, var(--default-orange));
    --rgb-deep-orange: var(--mush-rgb-deep-orange, var(--default-deep-orange));
    --rgb-brown: var(--mush-rgb-brown, var(--default-brown));
    --rgb-grey: var(--mush-rgb-grey, var(--default-grey));
    --rgb-blue-grey: var(--mush-rgb-blue-grey, var(--default-blue-grey));
    --rgb-black: var(--mush-rgb-black, var(--default-black));
    --rgb-white: var(--mush-rgb-white, var(--default-white));
    --rgb-disabled: var(--mush-rgb-disabled, var(--default-disabled));

First Stage

--default-red: 244, 67, 54;
    --default-pink: 233, 30, 99;
    --default-purple: 156, 39, 176;
    --default-deep-purple: 103, 58, 183;
    --default-indigo: 63, 81, 181;
    --default-blue: 33, 150, 243;
    --default-light-blue: 3, 169, 244;
    --default-cyan: 0, 188, 212;
    --default-teal: 0, 150, 136;
    --default-green: 76, 175, 80;
    --default-light-green: 139, 195, 74;
    --default-lime: 205, 220, 57;
    --default-yellow: 255, 235, 59;
    --default-amber: 255, 193, 7;
    --default-orange: 255, 152, 0;
    --default-deep-orange: 255, 87, 34;
    --default-brown: 121, 85, 72;
    --default-grey: 158, 158, 158;
    --default-blue-grey: 96, 125, 139;
    --default-black: 0, 0, 0;
    --default-white: 255, 255, 255;
    --default-disabled: 189, 189, 189;

[LiQuid_cOOled]

This should work with the latest 3.4 update.

type: custom:mushroom-template-card
icon: hue:room-living
entity: light.pc_hue_bar
layout: vertical
secondary: |
  {% if states(config.entity) == 'off' %} 
     Aan
      {% else %}
      Uit
   {% endif %}
primary: Woonkamer/Keuken
multiline_secondary: true
icon_color: |
  {% if states(config.entity) == 'off' %} 
      blue
       {% else %}
       red
    {% endif %}
fill_container: true
card_mod:
  style: |
    ha-card {
     --card-secondary-color: yellow;
     --card-primary-color: red;
       }

[Lewis_gio (Lewis)]

Hi everyone, I’m looking for an idea to make a mushroom card for my 2 cams, any suggestions? Thank you

[Vandana (Vandana Dass)]

type: custom:stack-in-card
mode: vertical
cards:
  - square: false
    columns: 1
    type: grid
    cards:
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: conditional
            conditions:
              - entity: switch.nest
                state_not: unavailable
            card:
              type: custom:mushroom-template-card
              entity: switch.nest
              icon: >-
                {{ 'mdi:speaker-wireless' if is_state(entity, 'on') else
                'mdi:speaker-off' }}
              icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''pink'' }}'
              layout: vertical
              primary: Nest
              secondary: '{{ states("switch.nest") }}'
              card_mod:
                style: |
                  ha-card {
                      padding: 5px 0px 0px 0px !important;
                  }    
                  :host {
                  --icon-size: 35px !important; 
                  --card-primary-font-size: 9px !important;
                  --card-secondary-font-size: 9px!important;
                  }
              tap_action:
                action: toggle

Hello everyone,
Kindly guide me how to decrease the space between

1. Icon and the text “Nest”.
2. Text “Nest” and text “on”.

Thank you.

[LiQuid_cOOled]

Use --card-secondary-line-height: 5px !important; to control the line height. Adjust the 8px accordingly.

Changes in 3.4 have made this an issue for some folks.

type: custom:stack-in-card
mode: vertical
cards:
  - square: false
    columns: 1
    type: grid
    cards:
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: conditional
            conditions:
              - entity: switch.nest
                state_not: unavailable
            card:
              type: custom:mushroom-template-card
              entity: switch.nest
              icon: >-
                {{ 'mdi:speaker-wireless' if is_state(entity, 'on') else
                'mdi:speaker-off' }}
              icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''pink'' }}'
              layout: vertical
              primary: Nest
              secondary: '{{ states("switch.nest") }}'
              card_mod:
                style: |
                  ha-card {
                  --icon-size: 35px !important; 
                  --card-primary-font-size: 9px !important;
                  --card-secondary-font-size: 9px !important;
                  --card-primary-line-height: 10px !important;
                  --card-secondary-line-height: 10px !important;
                  }
              tap_action:
                action: toggle

[berkans (Berkan Sezer)]

All my cards were corrupted with the last update. Fonts, line heights, font colors, everything is gone. Now I have to go back and re-examine 30 thousand lines of code and fix it. I also need to edit the pages of guides I’ve published on my github page. Is there going to be a fix for that or should I start working on it ? @piitaya

[Vandana (Vandana Dass)]

Thank you so much it worked…

Is there a way to make it global? I mean which file should I change to include the following lines, so that the changes are reflected in each dashboard. Thank you.

--card-primary-line-height: 10px !important;
--card-secondary-line-height: 10px !important;

[LiQuid_cOOled]

I think we need to wait a few days and see how this plays out. A couple of lines of altered code has changed so many user’s dashboards. I feel like it is bound to be addressed.

Every fix I have addressed today involves this issue.

[LiQuid_cOOled]

Line 1302 is the error IMO. secondary=${o("card.not_found")} should be .secondary=${o("card.not_found")}

**UPDATE…I was wrong about this. Card-Mod is the issue and will need updated.

[Vandana (Vandana Dass)]

Ok… thank you…

[berkans (Berkan Sezer)]

I have gone back to V3.3.0 and will stay there until a fix has been released.

[dimitri.landerloos]

Im currently also holding off on updating my guide. just to see how it plays out. @LiQuid_cOOled