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

Ah gotchu.

you can use state_attr != none for that.
but it will also trigger as false if the light is off…

i havent found a way to check if an entity has an attribute sometimes. because that attribute dissapears when the light is off i cant really test for it.

{{ state_attr('light.office_main_light', 'rgb_color') != none }}
{{ state_attr('light.kitchen_cabinet_light', 'rgb_color') != none }}
{{ state_attr('light.kitchen_down_light_1', 'rgb_color') != none }}

so best you can do is test for if a light is on and it has the rgb_color attribute. you can do this in 2 ways. either a combined statement like this. where you then only have 2 choices.

{% if states('light.office_main_light') == 'on' and state_attr('light.office_main_light', 'rgb_color') != none %}
  Change Background to Light Color
{% else %}
  Light is either Off or Doesnt Support rgb_color Attribute.
{% endif %}

or what i think is better in this instance, a nested if statement that then gives you 3 options like this.

{% if states('light.kitchen_down_light_1') == 'on' %}
  {%- if state_attr('light.kitchen_down_light_1', 'rgb_color') != none -%}
    Change Background to Light Color
  {%- else -%}
    Set a Standard Background Color Because Light Doesnt Support rgb_color Attribute
  {%- endif -%}
{% else %}
  Light is Off
{% endif %}

Edit: can also do it with an elif instead to have all 3 options. Probably a bit easier to read too :slight_smile:

{% if states('light.kitchen_down_light_1') == 'on' and state_attr('light.kitchen_down_light_1', 'rgb_color') != none %}
  Change Background to Light Color
{% elif states('light.kitchen_down_light_1') == 'on' %}
  Set a Standard Background Color Because Light Doesnt Support rgb_color Attribute
{% else %}
  Light is Off
{% endif %}
1 Like

Does anyone know how to remove this light-grey grid?

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 66px auto
      margin: '-4px -4px -12px -4px;'
    cards:
      - type: custom:mushroom-entity-card
        entity: weather.openweathermap
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:hourly-weather
        entity: weather.openweathermap
        icons: false
        label_spacing: '2'
        num_segments: '12'
        name: ' '
        language: nl
        card_mod:
          style:
            weather-bar$: |
              .main {
                --mush-rgb-red: 244, 67, 54;
                --mush-rgb-pink: 233, 30, 99;
                --mush-rgb-purple: 156, 39, 176;
                --mush-rgb-deep-purple: 103, 58, 183;
                --mush-rgb-indigo: 63, 81, 181;
                --mush-rgb-blue: 33, 150, 243;
                --mush-rgb-light-blue: 3, 169, 244;
                --mush-rgb-cyan: 0, 188, 212;
                --mush-rgb-teal: 0, 150, 136;
                --mush-rgb-green: 76, 175, 80;
                --mush-rgb-light-green: 139, 195, 74;
                --mush-rgb-lime: 205, 220, 57;
                --mush-rgb-yellow: 255, 235, 59;
                --mush-rgb-amber: 255, 193, 7;
                --mush-rgb-orange: 255, 152, 0;
                --mush-rgb-deep-orange: 255, 87, 34;
                --mush-rgb-brown: 121, 85, 72;
                --mush-rgb-grey: 158, 158, 158;
                --mush-rgb-blue-grey: 96, 125, 139;
                --mush-rgb-black: 0, 0, 0;
                --mush-rgb-white: 255, 255, 255;

                --color-clear-night: rgba(var(--mush-rgb-black), 0.2) !important;
                --color-cloudy: rgba(var(--mush-rgb-grey), 0.2) !important;
                --color-fog: var(--color-cloudy);
                --color-hail: rgba(var(--mush-rgb-blue), 0.2) !important;
                --color-lightning: var(--color-rainy);
                --color-lightning-rainy: var(--color-rainy);
                --color-partlycloudy: rgba(var(--mush-rgb-light-blue), 0.2) !important;
                --color-pouring: var(--color-rainy);
                --color-rainy: rgba(var(--mush-rgb-blue), 0.2) !important;
                --color-snowy: rgba(var(--mush-rgb-white), 0.2) !important;
                --color-snowy-rainy: var(--color-partlycloudy);
                --color-sunny: rgba(var(--mush-rgb-yellow), 0.2) !important;
                --color-windy: var(--color-sunny);
                --color-windy-variant: var(--color-sunny);
                --color-exceptional: rgba(var(--mush-rgb-amber), 0.2) !important;
              }
              .bar > div {
                height: 42px !important;
              }            
              .bar > div:first-child {
                border-top-left-radius: 12px !important;
                border-bottom-left-radius: 12px !important;
              }            
              .bar > div:last-child {
                border-top-right-radius: 12px !important;
                border-bottom-right-radius: 12px !important;
              }            
              .bar > div > span {
                text-shadow: none !important;
                color: rgb(var(--primary-text-color));
                font-size: 14px;
                font-weight: bold;
              } 
              .axes > div > .bar-block-bottom > .hour {
                font-size: 12px;
                font-weight: bolder;
              }
              .axes > div > .bar-block-bottom > .temperature {
                font-size: 12px;
                font-weight: bolder;
              }
            .: |
              ha-card {
                background: none;
                --ha-card-box-shadow: 0px;
                margin: -8px -4px -4px -16px;
              }

post your code.

dont even know what cards this is made out of.

Thx again for your help

one more question, perhaps you have an answer :slight_smile:
Is there a possibilty to set the background in card_mod depending on light / dark mode
i know, i could make different themes - but perhaps its directly possible in card_mod with an if statement :slight_smile:

i know of one way. wrap your ha-card in @media (prefers-color-scheme: light). like this for example.

             @media (prefers-color-scheme: dark) {
               ha-card { 
                 background-color: #0c3b0c;
               }
             }
             @media (prefers-color-scheme: light) {
               ha-card { 
                 background-color: #defce0;
               }
             }

i think dark blue will be fine

1 Like

Hello, can someone explain to me how do I show the percentage of blinds that are open?!?
with cover card everything is perfect except the font that is different, but using template card only appears “open” in the state!

cover

Instead of using

{{states('cover.yourcoverentityid')}}

Try and use

{{state_attr('cover.yourcoverentityid','current_position')}}

Look in developer tools for your entities to see what attributes they support :slight_smile:

1 Like

Forgot to add. Included now!

I’m setting up a dashboard with mushroom theme, is there a way to set the ‘icon_color’ based on the status of the lock?

I’m wanting it so that if the door is locked, it’ll display in green, otherwise show as red.

I actually just did thiw, with the template chip.

- type: template
  entity: lock.entrance_front_door
  icon: |-
         {% if states('lock.entrance_front_door')=='locked' %}
         mdi:lock
         {% elif states('lock.entrance_front_door')=='unlocked' %}
         mdi:lock-open
         {% endif %}
  icon_color: |-
         {% if states('lock.entrance_front_door')=='locked' %}
         red
         {% elif states('lock.entrance_front_door')=='unlocked' %}
         green
         {% else %}
         blue
         {% endif %}
1 Like

add this:

              .axes > div > .bar-block-left {
                border: transparent !important;
              }
              .axes > div > .bar-block-right {
                border: transparent !important;
              }
1 Like

I am trying to simplify my frontend and created templates that include additional information in attributes to keep more logic in the backend. (including the e.g. icon color or special status)
For now I use the mushroom template-card to display these attributes, but I noticed that this slows down the visualisation of my dashboard.
The entity card gives the possibility to display also attributes and is much faster but lacks some visualisation options.
Would it be possible to use attributes also in the other mushroom cards?

Thank you!

did anyone find out where to place these triggers? I am stuck

Depends on how you setup your configuration. :wink:

The “triggers” are in reality triggered template sensors, that need to go in configuration.yaml (or if you have split up the config in the according file).

See here:

appreciated if you can do that. Thank you

I’m trying to add this to a chip card, but not working,

type: custom:mushroom-template-card
icon: mdi:motion-sensor
icon_color: blue
primary: Motion
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }
      .shape {
        --shape-animation: motion 2s linear infinite;
      }
      @keyframes motion {
        0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
        50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
      }

First of all try like this in your regular template card.

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: motion 2s linear infinite;
      }
      @keyframes motion {
        0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
        50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
      }
    .: |
      ha-state-icon {
        animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }

Then in order to add styling to the icon of a chip you would need to drill from the main chip card to the specific chip. Cant add to chips directly. So like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:motion-sensor
    icon_color: blue
    card_mod:
      style: |
        ha-card {
          animation: motion 2s linear infinite;
        }
        @keyframes motion {
          0%, 100% { --chip-background: rgba(var(--rgb-blue), 0.3); }
          50% { --chip-background: rgba(var(--rgb-blue), 0.2); }
        }
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: clip 2s linear infinite;
      }
      @keyframes clip {
        50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
      }
1 Like

It looks like the only animation that is working is the .shape section. I can’t figure out why the rest won’t.

type: custom:mushroom-template-card
icon: mdi:wifi
icon_color: white
primary: Signal
layout: vertical
tap_action:
  action: navigate
  navigation_path: /lovelace/wifi
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: clip 2s steps(1) infinite;
      }
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes clip {
        0% { clip-path: circle(0% at 50% 85%); }
        20% { clip-path: circle(30% at 50% 85%); }
        40% { clip-path: circle(55% at 50% 85%); }
        60% { clip-path: circle(80% at 50% 85%); }
      }
      @keyframes ping {
        60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }