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

[Chykan (Andrew)]

I just use caule-themes-pack-1/info.md at 0ec8a4b7acf63d8618bcf2fdd968d6256e998acb · ricardoquecria/caule-themes-pack-1 · GitHub or GitHub - AmoebeLabs/HA-Theme_M3-C11-Purple: Material Design 3 / Material YOU theme for Home Assistant. A separate theme can be applied as default for light or dark mode using the the call service. Make sure you press the call service button for each setting.

Want dark all the time, set the dark theme for both light and dark.

Set each dashboard to no theme and do not apply any themes to the cards. The system will follow default then.

Make sure theme is set for default on each device used to login.

[LiQuid_cOOled]

Here is the code for the animations. Message me if you have any issues implementing it.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:stove
    icon_color: white
    primary: Stove
    card_mod:
      style: |
        ha-card{
         background: none !important;
         border: none !important; 
         padding-bottom: 0px !important;
         z-index: 0;
         height: 50px !important;
        }
  - type: custom:mushroom-template-card
    icon: mdi:heat-wave
    icon_color: orange
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape { 
           background: none !important;
           --icon-symbol-size: 20px;
           {% if states('sensor.range_cooktop_burner') == 'run' %}
           {% else %}
           --icon-color: transparent;
           {% endif %} 
                  }
        .: |
          ha-card {
           margin-top: -74px !important;
           border: none;
                    }
          ha-state-icon {
             {% if states('sensor.range_cooktop_burner') == 'run' %}
             animation: top 2s alternate infinite;
             {% endif %} 
               }
           @keyframes top {
            0%, 100% { clip-path: inset(100% 0 0 0); }
              0% { clip-path: inset(35% 0 0 0 ); }
                 }
  - type: custom:mushroom-template-card
    icon: mdi:radiator
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {  
           background: none !important;
           rotate: ;
           --icon-symbol-size: 17px;
           {% if states('sensor.range_oven_job_state') == 'cooking' %}
                  }
           .shape:before {
            content: "";
            height: 12px;
            width: 16px;
            border-width: 0;
            position: absolute;
            background: black;
            top: 12px !important;
            left: 12px !important; 
                 }
            {% else %}   
               --icon-color: transparent;
            {% endif %} 
                 } 
        .: |
          ha-card {
           margin-top: -65px !important;
           border: none;
              }
          ha-state-icon {
             {% if states('sensor.range_oven_job_state') == 'cooking' %}
             animation:  oven 2s alternate infinite;
            {% endif %} 
               }
          @keyframes oven {
            0%, 100% { clip-path: inset(50% 0 0 0); }
              0% { clip-path: inset(0 0 0 0 ); }
                 }

[LiQuid_cOOled]

@Coolie1101

sensor.range_oven_job_state

For my understanding, these settings aren’t working for you? redline highlight

What does the box say where I highlighted green?

You even have the option to create your own theme, which is quite simple.

[Coolie1101 (Coolie)]

Amazing, thank you, I implement when I get in and let you know.

[Vlad_August]

Thanks, it works but only without other styles. Can this work with ha-card and for all light chips?

- type: custom:mushroom-chips-card
    card_mod:
      style: |
        mushroom-light-chip:nth-child(1)$: |
          ha-state-icon {
            --icon-color: blue;
          }
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          -chip-spacing: none;
          --chip-icon-size: 22px;
          --primary-text-color: rgb(var(--rgb-disabled));
        }
    chips:
      - type: light

[Frosty]

yes you can add ha-card. checkout this guide
especially the

What the $ and .: | symbols do

type: custom:mushroom-chips-card
chips:
  - type: light
    entity: light.lights_off
    icon: mdi:ceiling-light
  - type: light
    entity: light.kitchen
  - type: light
    entity: light.bar_2
card_mod:
  style:
    mushroom-light-chip:nth-child(1)$: |
      ha-state-icon {
        --icon-color: blue;
      }
    mushroom-light-chip:nth-child(2)$: |
      ha-state-icon {
        --icon-color: red;
      }
    mushroom-light-chip:nth-child(3)$: |
      ha-state-icon {
        --icon-color: green;
      }
    .: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        -chip-spacing: none;
        --chip-icon-size: 22px;
        --primary-text-color: rgb(var(--rgb-disabled));
      }

[Faecon (Jo)]

I have 8 custom:mushroom-template-card’s with tap actions, when tapped running (the same) script.

Is there a way to check in the script which custom:mushroom-template-card is tapped ?
I made 1 script for the 8 cards, but when one is pressed, I want to set the state to on, before the script starts running…

[Brano69 (Brano)]

@Faecon

tap actions, when tapped running (the same) script.

Is there a way to check in the script which custom:mushroom-template-card is tapped ?
I made 1 script for the 8 cards, but when one is pressed, I want to set the state to on, before the script starts running…

Is there a possibility to change the text of the status, for example so that instead of “Off” it prints the text I want!

[Faecon (Jo)]

If state is off then “text” ?

[Brano69 (Brano)]

Yes, but on the chip card itself!

[Frosty]

Like this ?

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: toggle
    content: |-
      {% if 'on' in states('light.nspanel_relay_1') %}
        ON, maybe?
      {% else %}
        OFFish
      {% endif %}
    icon: mdi:lightbulb
    entity: light.nspanel_relay_1

[Coolie1101 (Coolie)]

@LiQuid_cOOled Thank you very much, works great.

[Chykan (Andrew)]

Change Mushroom Number Card Slider Colour based on state.
Thought I would post because I could not find many examples, this one based on a soil moisture meter.

Made to align with this gauge card.

  - type: custom:mushroom-number-card
    entity: input_number.back_garden_set_moisture
    display_mode: slider
    name: Back Garden Set Moisture Level
    card_mod:
      style:
        mushroom-number-value-control$: |
          mushroom-slider {
            {% set nbr= states('input_number.back_garden_set_moisture') | float %}
            {% if nbr<21 %}
            --main-color: #F75050 !important;
            --bg-color: #700700 !important;
            {% elif nbr<41 %}
            --main-color: #EEE049 !important;
            --bg-color: #737500 !important;
            {% elif nbr<61 %}
            --main-color: #55E84A !important;
            --bg-color: #006122 !important;
            {% elif nbr<100 %}
            --main-color: #39BEEA !important;
            --bg-color: #006875  !important;
            {% endif %}
          }

[Chykan (Andrew)]

Gradient Slider Background.
Grandients made with CSS Gradient

HARD GRADIENT

type: horizontal-stack
cards:
  - type: custom:mushroom-number-card
    entity: input_number.back_garden_set_moisture
    display_mode: slider
    name: Back Garden Set Target Moisture Level
    card_mod:
      style:
        mushroom-number-value-control$: |
          mushroom-slider {
            {% set nbr= states('input_number.back_garden_set_moisture') | float %}
            {% if nbr<21 %}
            --main-color: #F75050 !important;
            --gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
            {% elif nbr<41 %}
            --main-color: #EEE049 !important;
            --gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
            {% elif nbr<61 %}
            --main-color: #55E84A !important;
            --gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
            {% elif nbr<100 %}
            --main-color: #39BEEA !important;
            --gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 20%, rgba(115,117,0,1) 21%, rgba(115,117,0,1) 40%, rgba(0,97,34,1) 41%, rgba(0,97,34,1) 60%, rgba(0,104,117,1) 61%) !important;
            {% endif %}
          }

SOFT GRADIENT

type: horizontal-stack
cards:
  - type: custom:mushroom-number-card
    entity: input_number.back_garden_set_moisture
    display_mode: slider
    name: Back Garden Set Target Moisture Level
    card_mod:
      style:
        mushroom-number-value-control$: |
          mushroom-slider {
            {% set nbr= states('input_number.back_garden_set_moisture') | float %}
            {% if nbr<21 %}
            --main-color: #F75050 !important;
            --gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 10%, rgba(115,117,0,1) 30%, rgba(0,97,34,1) 50%, rgba(0,104,117,1) 75%) !important;
            {% elif nbr<41 %}
            --main-color: #EEE049 !important;
            --gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 10%, rgba(115,117,0,1) 30%, rgba(0,97,34,1) 50%, rgba(0,104,117,1) 75%) !important;
            {% elif nbr<61 %}
            --main-color: #55E84A !important;
            --gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 10%, rgba(115,117,0,1) 30%, rgba(0,97,34,1) 50%, rgba(0,104,117,1) 75%) !important;
            {% elif nbr<100 %}
            --main-color: #39BEEA !important;
            --gradient: -webkit-linear-gradient(360deg, rgba(112,7,0,1) 10%, rgba(115,117,0,1) 30%, rgba(0,97,34,1) 50%, rgba(0,104,117,1) 75%) !important;
            {% endif %}
          }

[Brano69 (Brano)]

@Coolie1101

Thank you

Thank you !

[GTunney]

Is it possible for this to work within a chip card? Something like below?

type: custom:mushroom-chips-card
chips:
  - type: custom:mushroom-template-card
    entity: switch.fan
    icon: mdi:fan
    icon_color: '{{ ''grey'' if states(config.entity) == ''off'' else ''blue''}}'
    primary: '{{ ''Not Running'' if states(config.entity) == ''off'' else ''Running''}}'
    tap_action:
      action: navigate
      navigation_path: /lovelace/temperature
    card_mod:
      style: |
        ha-icon {
          {{ 'animation: spin 1s linear infinite;' if states(config.entity) == 'on' else 'animation: none;' }}
        }

[LiQuid_cOOled]

@GTunney

switch.fan

This should work

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: switch.fan
    icon: mdi:fan
    icon_color: '{{ ''grey'' if states(config.entity) == ''off'' else ''blue''}}'
    content: '{{ ''Not Running'' if states(config.entity) == ''off'' else ''Running''}}'
    tap_action:
      action: navigate
      navigation_path: /lovelace/temperature
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
       {{ 'animation: spin 1s linear infinite;' if is_state('switch.fan', 'on') else 'animation: none;' }}
         }
       @keyframes spin {
       100% { transform: rotate(360deg); }
         }   

[GTunney]

Thank you, that works on it’s own but won’t work when I build it into my room tile.

Ignore all the entities being all over the place at the moment, I’m just testing and creating the card so using lights for now as conditions etc.

Any suggestions?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Bathroom
    secondary: >-
      {{ states('sensor.openweathermap_temperature') | round (1) }}°C - {{
      states('sensor.openweathermap_humidity') }}%
    icon: mdi:tree
    entity: light.soffit_lights
    hold_action:
      action: toggle
    tap_action:
      action: navigate
      navigation_path: /home-v2/outside
    icon_color: '{{ "orange" if is_state("light.soffit_lights", "on") else "disabled" }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            text-shadow: 0px 0px 5px black;
            --card-primary-font-weight: 325;
           --card-primary-color: white;
            --card-primary-font-size: 20px;
            align-items: end;
            margin-top: 175px;
            inline-size: 180px;
            height: 25px;
          }
          .secondary {
            --card-secondary-font-size: 13px;
              text-shadow: 0px 0px 5px black;
           --card-secondary-color: white;
            --card-secondary-font-weight: 350;
              margin-top: -2px;
          } 
        .: |
          :host {
          {% if is_state('light.soffit_lights', 'off') %}
            background: url('/local/images/areas/bathroom.jpg') center;
            background-size: cover;
            background-position-y: 70px;
            background-blend-mode: overlay;
            #filter: grayscale(70%);
            background-color: rgba(var(--rgb-card-background-color), 0.0);
          {% endif %}
            --mush-icon-size: 0px;
            height: 220px;
            margin-left: -15px !important;
            margin-top: -70px !important;
          {% if is_state('light.soffit_lights', 'on') %}
            background: url('/local/images/areas/bathroom.jpg') center;
            background-size: cover;
            background-blend-mode: overlay;
            background-position-y: 70px;
            background-color: rgba(var(--rgb-card-background-color), 0.0);
          {% endif %}
          }
          mushroom-shape-icon {
            --shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.soffit_lights', 'on') else 'disabled' }}), 0.4) !important;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.dining_room_lamp
        icon: mdi:fan
        icon_color: '{{ ''grey'' if states(config.entity) == ''off'' else ''blue''}}'
        content: ''
        tap_action:
          action: navigate
          navigation_path: /lovelace/temperature
        card_mod:
          style:
            mushroom-template-chip:nth-child(1)$: |
              ha-state-icon {
               {{ 'animation: spin 1s linear infinite;' if is_state('light.dining_room_lamp', 'on') else 'animation: none;' }}
                 }
               @keyframes spin {
               100% { transform: rotate(360deg); }
                 }     
      - type: template
        entity: light.soffit_lights
        icon: >-
          {{ 'mdi:lightbulb' if expand(area_entities('outside')) |
          selectattr('domain','eq','light') | selectattr('state','eq','on') |
          list | count > 0 else 'mdi:lightbulb-outline' }}
        icon_color: >
          {% set lights_in_outside = expand(area_entities('outside')) |
          selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
          lights_in_outside | selectattr('state', 'eq', 'on') | list | count > 0
          else 'grey' }}
        content: >-
          {{ expand(area_entities('outside')) |
          selectattr('domain','eq','light') | selectattr('state','eq','on') |
          list | count }}
        tap_action:
          action: call-service
          service: light.toggle
          target:
            area_id: outside
        hold_action:
          action: more-info
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: -15px;
          margin-top: -10px;
        } 
card_mod:
  style: |
    ha-card {
      height: 180px;
      width: 180px;
      margin-left: auto;
      margin-right: auto;
      {% if is_state('light.soffit_lights', 'on') %}
          #box-shadow: 0 0 20px rgba(245, 173, 66, 0.5);
          #border-radius: 10px;
          #background: rgba(245, 173, 66, 0.3);      {% endif %}
    }

[LiQuid_cOOled]

@GTunney

ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: -15px;
          margin-top: -10px;
        } 

The placement of card mod code is crucial

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Bathroom
    secondary: >-
      {{ states('sensor.openweathermap_temperature') | round (1) }}°C - {{
      states('sensor.openweathermap_humidity') }}%
    icon: mdi:tree
    entity: light.soffit_lights
    hold_action:
      action: toggle
    tap_action:
      action: navigate
      navigation_path: /home-v2/outside
    icon_color: '{{ "orange" if is_state("light.soffit_lights", "on") else "disabled" }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            text-shadow: 0px 0px 5px black;
            --card-primary-font-weight: 325;
           --card-primary-color: white;
            --card-primary-font-size: 20px;
            align-items: end;
            margin-top: 175px;
            inline-size: 180px;
            height: 25px;
          }
          .secondary {
            --card-secondary-font-size: 13px;
              text-shadow: 0px 0px 5px black;
           --card-secondary-color: white;
            --card-secondary-font-weight: 350;
              margin-top: -2px;
          } 
        .: |
          :host {
          {% if is_state('light.soffit_lights', 'off') %}
            background: url('/local/images/areas/bathroom.jpg') center;
            background-size: cover;
            background-position-y: 70px;
            background-blend-mode: overlay;
            #filter: grayscale(70%);
            background-color: rgba(var(--rgb-card-background-color), 0.0);
          {% endif %}
            --mush-icon-size: 0px;
            height: 220px;
            margin-left: -15px !important;
            margin-top: -70px !important;
          {% if is_state('light.soffit_lights', 'on') %}
            background: url('/local/images/areas/bathroom.jpg') center;
            background-size: cover;
            background-blend-mode: overlay;
            background-position-y: 70px;
            background-color: rgba(var(--rgb-card-background-color), 0.0);
          {% endif %}
          }
          mushroom-shape-icon {
            --shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.soffit_lights', 'on') else 'disabled' }}), 0.4) !important;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.dining_room_lamp
        icon: mdi:fan
        icon_color: '{{ ''grey'' if states(config.entity) == ''off'' else ''blue''}}'
        content: ''
        tap_action:
          action: navigate
          navigation_path: /lovelace/temperature
        card_mod:
          style: |
            ha-card {
              border: none;}
      - type: template
        entity: light.soffit_lights
        icon: >-
          {{ 'mdi:lightbulb' if expand(area_entities('outside')) |
          selectattr('domain','eq','light') | selectattr('state','eq','on') |
          list | count > 0 else 'mdi:lightbulb-outline' }}
        icon_color: >
          {% set lights_in_outside = expand(area_entities('outside')) |
          selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
          lights_in_outside | selectattr('state', 'eq', 'on') | list | count > 0
          else 'grey' }}
        content: >-
          {{ expand(area_entities('outside')) |
          selectattr('domain','eq','light') | selectattr('state','eq','on') |
          list | count }}
        tap_action:
          action: call-service
          service: light.toggle
          target:
            area_id: outside
        hold_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              border: none;}  
    alignment: end
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
         ha-state-icon {
          {{ 'animation: spin 1s linear infinite;' if is_state('light.pc_lights', 'on') else 'animation: none;' }}
                  }
          @keyframes spin {
          100% { transform: rotate(360deg); }
          }  
        .: |
         ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: -15px;
           margin-top: -10px;
          
          } 
card_mod:
  style: |
    ha-card {
      height: 180px;
      width: 180px;
      margin-left: auto;
      margin-right: auto;
      {% if is_state('light.soffit_lights', 'on') %}
          #box-shadow: 0 0 20px rgba(245, 173, 66, 0.5);
          #border-radius: 10px;
          #background: rgba(245, 173, 66, 0.3);      {% endif %}
    }

[GTunney]

That’s all working now thank you very much for your help.