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

[dimitri.landerloos]

Looks really good! i might even steal this idea for myself.

well done!

[Halover99 (HAlover)]

thanks works fine!
Last question it’s possible add a progress bar.
I have the start time and finish time of stream.

[muktheo]

Hi, sorry if Im a little bit out of topics, but may I ask about your esphome code for the air quality sensors (mh z19, bme680, and the PM 2.5) that you build? also some wiring diagrams if you not busy…thanks so much

[irqnet (Christoph)]

Seems that I’m kind of stuck doing the configuration of those nice animations. I’ve just pasted some examples into my dashboard and tried to adapt for my entities used. Anyway, I cannot see any animation.

Cardmod and Mushroom is latest version.

Any hints?

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    icon: mdi:lightning-bolt
    icon_color: amber
    primary: Charge
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: charge 1s linear infinite;
          }
          @keyframes charge {
            0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { transform: translate(0, 0); }
            5% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            15% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            25% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            35% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            45% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            55% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            65% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            75% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            85% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
            95% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:flash
    icon_color: red
    primary: Bezug
    secondary: '{{ states(''sensor.leistung_netzbezug_evcc'') }} W'
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: flash 4s linear infinite;
          }
          @keyframes flash {
            0%, 4%, 8%, 12%, 16%, 20%, 24%, 28%, 32%, 100% { transform: translate(0px,0px); }
            2% { transform: translate(-0.3px, 0px); }
            6% { transform: translate(0.3px, 0px); }
            10% { transform: translate(-0.2px, 0px); }
            14% { transform: translate(0.2px, 0px); }
            18% { transform: translate(-0.2px, 0px); }
            22% { transform: translate(0.5px, 0px); }
            26% { transform: translate(-0.5px, 0px); }
            34% { transform: translate(-1px, 5px); --icon-color: rgb(var(--rgb-amber)); }
            38% { transform: translate(0px, 0px); --icon-color: rgb(var(--rgb-white)); }
            40% { --icon-color: rgb(var(--rgb-amber)); }
          }

Cards are shown, but no animation is running.

[LiQuid_cOOled]

ha-state-icon { has to be separated from mushroom-shape-icon$: with .: |

This should get you headed in the right direction

- type: custom:mushroom-template-card
    icon: mdi:flash
    icon_color: red
    primary: Bezug
    secondary: '{{ states(''sensor.leistung_netzbezug_evcc'') }} W'
    card_mod:
      style: |
       ha-state-icon {
            animation: flash 4s linear infinite;
              }
           @keyframes flash {
            0%, 4%, 8%, 12%, 16%, 20%, 24%, 28%, 32%, 100% { transform: translate(0px,0px); }
            2% { transform: translate(-0.3px, 0px); }
            6% { transform: translate(0.3px, 0px); }
            10% { transform: translate(-0.2px, 0px); }
            14% { transform: translate(0.2px, 0px); }
            18% { transform: translate(-0.2px, 0px); }
            22% { transform: translate(0.5px, 0px); }
            26% { transform: translate(-0.5px, 0px); }
            34% { transform: translate(-1px, 5px); --icon-color: rgb(var(--rgb-amber)); }
            38% { transform: translate(0px, 0px); --icon-color: rgb(var(--rgb-white)); }
            40% { --icon-color: rgb(var(--rgb-amber)); }
            }

a little more complex…

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: m
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --icon-symbol-size: 60px !important;
            --icon-size: 60px !important;
            --shape-color: none;
             }
        .: |
          ha-state-icon {
           width: 40px;
           height: 10px;
           color: blue;
           background:
           radial-gradient(farthest-side,red 90%,#0000) left  /10px 10px,
           radial-gradient(farthest-side,blue 90%,#0000) center/10px 10px,
           radial-gradient(farthest-side,red 90%,#0000) right /10px 10px,
           linear-gradient(currentColor 0 0) center/100% 4px; 
           background-repeat: no-repeat;
           position: relative;
           animation: s6 2s infinite linear;
           }
           ha-state-icon:before,
           ha-state-icon:after {
           content: "";
           position: absolute;
           inset:0;
           background:inherit;
           animation:inherit;
           --s:calc(50% - 5px);
           animation-direction: reverse;
           }
           ha-state-icon:after {
             --s:calc(5px - 50%);
           }

           @keyframes s6 {
             0%   {transform: translate(var(--s,0)) rotate(0)}
             100% {transform: translate(var(--s,0)) rotate(1turn)}
           }
card_mod:
  style: |
    ha-card {
        box-shadow: none;
        --ha-card-border-width: 0px;
        background-color: rgba(100, 100, 100, .1);
                  }

[irqnet (Christoph)]

ok, thats working, but not sure if I got it

At least the basic integration is not working at all… like in the example, just quoted, no spinning fan or pulse.

icon: mdi:pulse
icon_color: red
primary: Pulse
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: pulse 2s ease-in-out infinite;
      }

[LiQuid_cOOled]

Please compare this code to yours and check out https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/7716:

@dimitri.landerloos has a very detailed guide.

type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
  style: |
    ha-state-icon {
      animation: spin 1s linear infinite;
    }

[irqnet (Christoph)]

Aye, so it’s just ha-state-icon and not the mushroom-shape-icon code like in the example.

[LiQuid_cOOled]

yes and animation: vs--icon-animation:

[LiQuid_cOOled]

More complex animations will require keyframes to execute.

[Sanderdegroot]

Hi all,

It looks like something is changed within the cards? Last week I updated my HACS integrations and after that my card is changed. Before the update, this map was a single entity, see the image below for reference:

After the update, the map has separate buttons:

I haven’t changed anything in the code. Does anyone know how this problem can be solved?

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.zeppelin_wireless
    icon: mdi:soundbar
    volume_controls: []
    fill_container: false
    show_volume_level: true
    use_media_info: false
    collapsible_controls: true
    tap_action:
      action: none
    name: Zeppelin
    media_controls: []
    primary_info: name
    secondary_info: state
    style: |
      ha-card {
        background-color: transparent;
        box-shadow: none;
        border: solid 0px rgba(100, 100, 100, 0.3);
        font-family: Arial, Helvetica, sans-serif;
      }
  - type: custom:mushroom-entity-card
    name: Mute
    fill_container: true
    secondary_info: none
    layout: vertical
    icon_color: indigo
    primary_info: none
    tap_action:
      action: call-service
      service: media_player.volume_mute
      data:
        is_volume_muted: true
      target:
        entity_id: media_player.zeppelin_wireless
    icon: mdi:volume-mute
    entity: media_player.zeppelin_wireless
    style: |
      ha-card {
        background-color: transparent;
        box-shadow: none;
        border: solid 0px rgba(100, 100, 100, 0.3);
        font-family: Arial, Helvetica, sans-serif;
      }
  - type: custom:mushroom-entity-card
    name: Vol Down
    fill_container: true
    secondary_info: none
    layout: vertical
    icon_color: indigo
    primary_info: none
    tap_action:
      action: call-service
      service: script.radio_volume_down
      data: {}
      target:
        entity_id: media_player.zeppelin_wireless
    icon: mdi:minus
    entity: media_player.zeppelin_wireless
    style: |
      ha-card {
        background-color: transparent;
        box-shadow: none;
        border: solid 0px rgba(100, 100, 100, 0.3);
        font-family: Arial, Helvetica, sans-serif;
      }
  - type: custom:mushroom-entity-card
    name: Vol Up
    fill_container: true
    secondary_info: none
    layout: vertical
    icon_color: indigo
    primary_info: none
    tap_action:
      action: call-service
      service: script.radio_volume_up
      data: {}
      target:
        entity_id: media_player.zeppelin_wireless
    icon: mdi:plus
    entity: media_player.zeppelin_wireless
    style: |
      ha-card {
        background-color: transparent;
        box-shadow: none;
        border: solid 0px rgba(100, 100, 100, 0.3);
        font-family: Arial, Helvetica, sans-serif;
      }

[LiQuid_cOOled]

Check out the breaking changes in card_mod 3.40

[racerx]

I’m trying to set icon color based on the state of the entity in my 3d printer. the state attribute is a hex code for the color of the filament. however the yellow makes the circle surrounding the icon disappear. anyone know how to rectify this? the hexcode for the yellow is #FFFF0AFE if that makes a diff

horizontal: true
cards:
  - type: custom:mushroom-template-card
    primary: AMS 1
    secondary: '{{ states(''sensor.p1s_01p00a3b2500877_ams_1_tray_1'') }}'
    icon: mdi:circle-slice-8
    entity: counter.aircon_clean_pipes
    icon_color: "{{ state_attr('sensor.p1s_01p00a3b2500877_ams_1_tray_1', 'color') }}"
    tap_action:
      action: more-info
    hold_action:
      action: none
    double_tap_action:
      action: none
    layout: vertical
  - type: custom:mushroom-template-card
    primary: AMS 2
    secondary: '{{ states(''sensor.p1s_01p00a3b2500877_ams_1_tray_2'') }}'
    icon: mdi:circle-slice-8
    entity: counter.aircon_clean_pipes
    icon_color: "{{ state_attr('sensor.p1s_01p00a3b2500877_ams_1_tray_2', 'color') }}"
    tap_action:
      action: more-info
    hold_action:
      action: none
    double_tap_action:
      action: none
    layout: vertical
  - type: custom:mushroom-template-card
    primary: AMS 3
    secondary: '{{ states(''sensor.p1s_01p00a3b2500877_ams_1_tray_3'') }}'
    icon: mdi:circle-slice-8
    entity: counter.aircon_clean_pipes
    icon_color: "{{ state_attr('sensor.p1s_01p00a3b2500877_ams_1_tray_3', 'color') }}"
    tap_action:
      action: more-info
    hold_action:
      action: none
    double_tap_action:
      action: none
    layout: vertical
  - type: custom:mushroom-template-card
    primary: AMS 4
    secondary: '{{ states(''sensor.p1s_01p00a3b2500877_ams_1_tray_4'') }}'
    icon: mdi:circle-slice-8
    entity: counter.aircon_clean_pipes
    icon_color: "{{ state_attr('sensor.p1s_01p00a3b2500877_ams_1_tray_4', 'color') }}"
    tap_action:
      action: more-info
    hold_action:
      action: none
    double_tap_action:
      action: none
    layout: vertical
type or paste code here

[Sanderdegroot]

Ah, perfect. Thank you. The solution was:

Replace

          style: |

For:

        card_mod:
          style: |

[hazio]

Clearing cache is a temporary fix, it just reverts back after a couple of days use.

[dimitri.landerloos]

Try and split the 2 last characters from your hex code. Reason being is that your hex code has an alpha channel and this doesnt work with the alpha channel of the icon background.

Should be able to do it like this:

{{'#FFFF0AFE'[:7]}}

[dimitri.landerloos]

Sounds like an issue with your browser more than something i can help you with unfortunately.

Is it the IOS having this issue by any chance?

Like i said notoriously hard to FULLY clear browser cache on IOS/MAC/Safari.

[hazio]

No worries. Yes, I have fully cleared cache/data on the browser. It seems to be a WebKit issue more than anything as Safari on Mac is the only one affected.

[RkcCorian]

I know in the meantime how to change the color of the icon via card-mod. Just tried to achieve the same more centrally via a theme. But when I use the following I get only a white icon. Any idea?

I tried with

  mush-rgb-state-cover-open: pink
  mush-rgb-state-cover-closed: orange

but this lead only to a white icon, I do not understand why

[LiQuid_cOOled]

A few questions

1. Are you placing those settings in a new renamed theme file in the themes/mushroom folder ? You have to create your own file. Editing the stock mushroom theme will not work. If yes ensure you are using that theme in your profile.

2. Are you using the mushroom-cover -card? Those settings will not alter a mush room-template-card.

I am assuming yes to both questions and believe your issue is the way you entered the colors. The colors have to match the code like this:

mush-rgb-state-cover-open: var(--mush-rgb-pink)
mush-rgb-state-cover-closed: var(--mush-rgb-orange)

The stock color is blue and when I added green it worked perfect. Don’t forget to do a quick restart.