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

Perfect, thanks

1 Like

Seriously, this is insane what you are doing in this thread!

And the animations are just awesome!

2 Likes

New room setup! Yes… I can’t stop…

The base card is the climate card, all in idle now.
The rest are just the most used lights or covers

Other similar things
image

Code for one card

type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    entity: climate.cameradalettoknx
    icon: mdi:bed-double-outline
    tap_action:
      action: navigate
      navigation_path: camere
    hold_action:
      action: more-info
    multiline_secondary: true
    card_mod:
      style: |
        :host {
          --mush-rgb-state-climate-auto: var(--rgb-deep-purple);
          --mush-rgb-state-climate-cool: var(--rgb-deep-purple);
          --mush-rgb-state-climate-dry: var(--rgb-deep-purple);
          --mush-rgb-state-climate-fan-only: var(--rgb-deep-purple);
          --mush-rgb-state-climate-heat: var(--rgb-deep-purple);
          --mush-rgb-state-climate-heat-cool: var(--rgb-deep-purple);
          --mush-rgb-state-climate-idle: var(--rgb-gray);
          --mush-rgb-state-climate-off: var(--rgb-deep-purple);
        }
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: light
        entity: light.camera_da_letto_knx
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            }
      - type: light
        entity: light.lamp1_cloud_180911
        content_info: none
        icon: mdi:desk-lamp
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            }
      - type: entity
        entity: cover.camera_da_letto_tenda_alta_knx
        content_info: none
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-spacing: 0;
            }

18 Likes

Hi all! This thread is a goldmine! :slight_smile:
I have a question about the “chip” (using a template). I’m trying to “add” some information after the “status” on the entity in the card. But when I pick the “status” manually, it’s not translated to the selected language. Is there a way to get the translated status in the template card as well? So it appears the same way as in the unmodified entity card. Here is an example with both cards…

And the actual code… :slight_smile:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: vacuum.rupert
    icon: mdi:robot-mower
    content: >
      {{ states('vacuum.rupert') }}
  - type: entity
    entity: vacuum.rupert
    content_info: state
alignment: center

Thank you! :slight_smile:

This is my favourite visualisation of a button press:

        card_mod:
          style: |
            ha-card:active {
                transform: scale(1.1);
                transition: 0s;
            }

A nice subtle “pop” that makes it much more obvious you’ve activated an action, especially on a device with no haptics. I’d really like an option on cards for something like this. Thanks again @rhysb!

2 Likes

The box-shadow animation for Mushroom Card is different for icon and picture.

Picture:

Mushroom Entity Picture Pulse

type: custom:mushroom-entity-card
entity: person.rhys
icon_type: entity-picture
card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
        }
        
        100% {
          box-shadow: 0 0 5px 15px transparent;
        }
      }

Icon:

Mushroom Entity Icon Pulse

type: custom:mushroom-entity-card
entity: person.rhys
icon: mdi:face-man
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
        }
        
        100% {
          box-shadow: 0 0 5px 15px transparent;
        }
      }
13 Likes

thanks alot @rhysb , exactly what I was looking for.

Can we change the volume steps when we press volume up or volume down (currently its 5) ?

1 Like

Here are a couple more ideas.

Mushroom Translate Animation:

Mushroom Card Acvtivate Animation - Translate

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Translate
card_mod:
  style: |
    ha-card:active {
        transform: translatey(1.5px);
        transition: 0s;
        box-shadow: 0px 0.5px 2px 0px rgba(0, 0, 0, 0.16);
    }

Mushroom Scale-In Animation:

Mushroom Card Acvtivate Animation - Scale-In

type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Scale-In
card_mod:
  style: |
    ha-card:active {
        transform: scale(0.975);
        transition: 0s;
    }
9 Likes

Thanks this was really useful. I have tried adapting the code as i only need the icon colour to change when the media player is either on or off state

card_mod:
  style: |
    ha-card {
      {% set state=states('media_player.living_room_tv') %}
        --rgb-state-media-player:
        {% if state=='off' %}
          var(--rgb-blue)
        {% elif state!='0' %}
          var(--rgb-yellow)
          {% endif %};
      }

The icon changes to yellow when the device is powered on but no colour change is made when its in a powered off state. Have i missed something here? Thanks

I think volume steps are determined by the media entity not the Mushroom Media Card.

Ok… I really appreciate you help and support…:+1:

1 Like

This might be better logic to use:

card_mod:
  style: |
    ha-card {
      {% set state = states(config.entity) %}
        --rgb-state-media-player:
        {% if state != 'off' %}
          var(--rgb-yellow)
        {% else %}
          var(--rgb-blue)
        {% endif %};
      }

With template Chip/Card you need to do all the extra bits, like translation, yourself.

Thanks for replying.

I tried this and strangely I get the same behaviour where the colour changes on the on state but not the off state.

I tried this on a separate card for a speaker to test and I got the same result (to rule out any potential issue with the entity I was trying to apply this to)

What is the state when you look in Dev Tools?

it shows as ‘off’

Although I have noticed that when it is powered on, its yellow but grey when powered off. The code you posted, should it not be blue when powered on?

Ah, I see the issue. It uses different variables for ‘off’. Try like this:

card_mod:
  style: |
    ha-card {
        --rgb-state-media-player: var(--rgb-yellow);
        --rgb-disabled: var(--rgb-blue) !important;
    }

You have nailed it thank you so much.

it did confuse me as my lights and plugs use host: when writing the template but was not sure of the variables to use for ha-card.

Again, really appreciate all you help and thanks again for taking the time to help me

1 Like

Hey, which Theme are you using? Looks nice!

Ah, ok… :slight_smile: That explains it. Thank you! I guess I have some work to do. :slight_smile:

1 Like