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

[davidnestico]

Love this!!

[boheme61]

@thesmer

everything looks fine (orange):

or … maybe it’s just default “light” color you see … try change orange to “red” … you might find that nothing works

so try to look for card-mod , to make your desired effect ( there are bunch of similar card-mod here in this topic, so it’ shouldn’t be hard to find) … EDIT: card-mod is not ideal for this(simple light switch) color wont change, unless/untill you refresh page, or it refresh it self

PS: and skip the icon_color: , or use mushroom-template-card

[mhackdo18]

Hi rhysb,

Do you have blueprint of this… this is amazing for phone… ilike it so much

[berkans (Berkan Sezer)]

I have created a ultra lite version of my modern dashboard. The main difference of this card from the previous one is this time I haven’t used any booleans. Just copy and paste the code and start to use it.

Page Properties:

• One single page for your home.
• Wonderful colors.
• Ambilight effect on everywhere.
• Glowing lights all around the page, dynamic to the state of the devices.
• Hidden sections through Swipe Card.
• Last motion detected room is shown with art effected pictures
• Advanced light control card.
• Exclusive person card (Thanks to Rhysb).
• Animated design.
• Live dynamic cards.
• Live Android Tv control card with remote control. See what is on your TV screen.
• Full page display thanks to Kiosk Mode.
• Netflix Card (Start shows on your Android Tv from your Dashboard)
• What to wear suggestions (with pictures) for your home depending on house temperature.
• Animated weather card.
• Easy calendar and camera access.
• Live birthday Card with pictures.
• Animated Spotify control.
• Control all your Media Players
• Room cards.
• Light control based on room presence. Close all house lights expect the room you are in.
• Multimedia files are included. I have also added additional multimedia files for you to customise your screen.

Modern Dashboard Ultra Lite Version (No Booleans used)

My other work :

Home

Screenshots:

[thesmer (Thomas)]

Thanks for pointing out the template type. I looked at it 100 times and did not see it.
Fixed it and now it works

[davidnestico]

Thanks for your help, I managed to create these based on your original card!

Here is the code if anyone wants to use it (or maybe help improve it ):

type: grid
square: false
cards:
  - type: custom:mushroom-template-card
    secondary: >-
      {{ states(config.entity) | replace('_only', '') | replace('_', '/') |
      title }}
    icon: none
    entity: climate.3family_room
    layout: vertical
    icon_color: ''
    tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape:after {
            content: "{{ state_attr(config.entity, 'current_temperature') | round(0) }}°";
            position: absolute;
            font-size: var(--card-primary-font-size);
            font-weight: bolder;
            {% set status = state_attr('climate.3family_room','hvac_action')
            %}

            {% if status == 'off' %}

            color: grey

            {% elif status == 'cooling' %}

            color: blue

            {% elif status == 'heating' %}

            color: red

            {% else %}

            color: grey

            {% endif %}
          }
          .shape {
            box-shadow: var(--ha-card-box-shadow) !important;
          }
        .: |
          ha-card {
            --ha-card-background: none;
            box-shadow: none;
            --ha-card-border-width: 0;
          }
          mushroom-shape-icon {
            --shape-color: white !important;
          }
  - type: custom:mushroom-template-card
    secondary: >-
      {% if is_state("lock.front_door", "unlocked")
      %}                            
        Door Unlocked                          
      {% else %}
        Door Locked
      {% endif %}
    icon: >-
      {% if is_state("lock.front_door", "unlocked")
      %}                            
        mdi:lock-open                          
      {% else %}
        mdi:lock
      {% endif %}
    entity: lock.front_door
    layout: vertical
    icon_color: >-
      {% if is_state("lock.front_door", "unlocked")
      %}                            
        red                          
      {% else %}
        green
      {% endif %}
    tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape:after {
            position: absolute;
            font-size: var(--card-primary-font-size);
            font-weight: bolder;
          .shape {
            box-shadow: var(--ha-card-box-shadow) !important;
          }
        .: |
          ha-card {
            --ha-card-background: none;
            box-shadow: none;
            --ha-card-border-width: 0;
          }
          mushroom-shape-icon {
            --shape-color: white !important;
          }
  - type: custom:mushroom-template-card
    secondary: |-
      {{ states(config.entity) }} 
        Persons Home
    icon: mdi:account-supervisor-circle
    entity: zone.home
    layout: vertical
    icon_color: orange
    primary: ''
    tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape:after {
            position: absolute;
            font-size: var(--card-primary-font-size);
            font-weight: bolder;
          }
          .shape {
            box-shadow: var(--ha-card-box-shadow) !important;
          }
        .: |
          ha-card {
            --ha-card-background: none;
            box-shadow: none;
            --ha-card-border-width: 0;
          }
          mushroom-shape-icon {
            --shape-color: white !important;
          }
  - type: custom:mushroom-template-card
    secondary: |-
      {{ states(config.entity) }}
      Lights On
    icon: hue:bulb-group-classic-3-alt
    entity: sensor.current_lights_on
    layout: vertical
    icon_color: orange
    tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape:after {
            position: absolute;
            font-size: var(--card-primary-font-size);
            font-weight: bolder;
          .shape {
            box-shadow: var(--ha-card-box-shadow) !important;
          }
        .: |
          ha-card {
            --ha-card-background: none;
            box-shadow: none;
            --ha-card-border-width: 0;
          }
          mushroom-shape-icon {
            --shape-color: white !important;
          }
columns: 4

[boheme61]

i’ve been there my self, chips light, chip template etc. , they are somehow more limited, so eventually i also ended up with modding mushroom-template-card, it has way more options

[theandouz]

Working on colourizing the tile card and am having a hard time using var(–tile-color) as a background colour for the tile, is it possible to convert the hex colour it uses to rgb or even just reduce the opacity when using the hex? Trying to use the tile color variable for entities that have dynamic color icons like battery entities or the alarm tile.

Here’s an example using set background colours, would like to use the tile color variable to simplify card-mod code.

Summary

type: tile
entity: sensor.andrews_iphone_battery_level
name: Battery
card_mod:
  style:
    ha-tile-info$: |
      .secondary {
        opacity: 80%;
      }
    .: |
      ha-card {
        --primary-text-color:  var(--tile-color);
        {% if states(config.entity)|int < 30 %}
          background: rgba(var(--mush-rgb-red),0.1);
        {% elif states(config.entity)|int < 70 %}
          background: rgba(var(--mush-rgb-orange),0.1);
        {% elif states(config.entity)|int <= 100 %}
          background: rgba(var(--mush-rgb-green),0.1);
        {% endif %} 
      }

[Jarne_Roussard]

hello thanks for checking this & where should i add this exactly can’t find where to put this?

[StickyClient]

@rhysb Sorry to bother you with this but I have no idea how to fix this. Is it possible to only change the app-header-background-color for one page view. I know it can be done inside a themes file but this affects the whole UI. The goal is to make the header color the same as my Welcome card but I prefer to have the header color the same as my primary-background-color on all other page views and pop-ups. Thanks in advance for any help.

[sanil.heartbeats (Sanil Sahadevan)]

.: |
          mushroom-conditional-chip {
            height: var(--chip-height);
            padding: 8px;
          }

This code worked, but it was causing a change in gap between the adjacent chips.

So i modified it to

.: |
          mushroom-conditional-chip {
            height: var(--chip-height);
            padding-bottom: 8px;
          }
          mushroom-conditional-chip:first-child {
            padding-left: 8px;
          }

Now it works perfectly…

Except at some times, the chips just run away a little apart (vertically) and becomes ok when the page is refreshed. Don’t know why it happens… anyway… the requirement is done…

[boheme61]

try this

card_mod:
  style: |
    .tile {
      {% if states(config.entity)|float(0) > 26 %}
        --tile-color: var(--rgb-red-color);
      {% elif states(config.entity)|float(0) > 21 %}  
        --tile-color: var(--rgb-green-color);
      {% else %}  
        --tile-color: var(--rgb-blue-color);
      {% endif %}  
    }

[sanil.heartbeats (Sanil Sahadevan)]

Fan switch with Timer option

I am trying to create a fan switch which has an option to set a toggle timer directly from the button itself. I already created the scripts and everything is working ok. Now i am trying to implement it onto a single button.

I am trying to achieve something like this

the right side button is the toggle timer script & the left one is the direct on-off switch. This layout was inspired from this lock card here
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/2412

i adjusted the margins, padding etc as per the desktop, but when it comes to a mobiles screen, its a mess… So i am trying to recreate the same with a layout card instead of the grid card used in the example…because the layout card column widths are more well defined. and no need to use negative margin values to adjust elements

this is the furthermost i could reach.

please excuse the colors. … i was trying to identify each element while applying card mod styling.

this is the code

Fan On-Off-Toggle-Timer Card

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    entity: switch.gf_br01_fan1
    primary: Bedroom Fan
    secondary: |
      {% if is_state(entity,'on') %}
        ON
      {% else %}
        OFF
      {% endif%}
    icon: mdi:fan
    icon_color: |
      {% if is_state(entity,'on') %}
        green
      {% else %}
        red
      {% endif%}
    tap_action:
      action: toggle
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 65% 35%
    cards:
      - type: custom:mushroom-number-card
        entity: input_number.gf_br01_fan01_toggle_duration
        display_mode: buttons
        layout: horizontal
        icon_type: none
        secondary_info: none
        primary_info: none
      - type: custom:mushroom-entity-card
        primary_info: none
        secondary_info: none
        layout: horizontal
        tap_action:
          action: toggle
        entity: script.gf_br01_fan01_toggle_script
        icon: mdi:power
        icon_color: green
card_mod:
  style:
    hui-horizontal-stack-card$:
      mushroom-template-card$: |
        ha-card {
          border: none;
          background: teal !important;
        }
      layout-card$:
        grid-layout$:
          mushroom-number-card$: |
            ha-card {
              border: none;
              padding-left: 0px !important;
              padding-right: 0px !important;
              background: teal; 
            }
          .: |
            :host {
              --layout-margin: 0px 4px 0px 4px;
            }
          mushroom-entity-card$: |
            ha-card {
              border: none;
              background: yellow;
            }
        .: |
          :host {
            border: none;
            background: grey;
          }
    .: |
      ha-card {
        background: green;
      }

now i am stuck at the last step.

in this Chrome DOM inspector, i need to set the margin values to

margin: var(--masonry-view-card-margin, 0px 4px 0px);

if is add this margin value to the element.style { } portion just above that in the DOM window, i can ajust each of those elements individually. and i am able to achieve the final result

Like this…

how do i implement this margin value into the yaml code…??.. please help …!!

[boheme61]

you can have as many themes you like, it wont affect anything unless you “load it” … and where you load it … so copy your existing modify it for that particular View(rename it, and make sure you followed the guide-lines for several views, meaning folder-reference in config.yaml), In the view click the 3 dots, click edit-dashboard, click the “lower” pencil to the left, choose theme

[pepeEL]

Hi. I create climate card and i have a problem. Sia any chance to change icons whis i select by RED color… and also add buttons for preset mode for climate ? I dont see any option…

type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        primary: '{{state_attr(entity, ''current_temperature'')}} °C'
        secondary: Temperatura wody
        entity: climate.ciepla_woda
        icon: mdi:water-thermometer
        name: Temperature
        icon_color: green
  - type: custom:mini-graph-card
    entities:
      - entity: climate.ciepla_woda
        attribute: current_temperature
        name: Temperatura
        color: var(--green-color)
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: false
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.ciepla_woda
        primary_info: none
        secondary_info: none
        icon_type: none
        show_temperature_control: true
      - type: custom:mushroom-climate-card
        entity: climate.ciepla_woda
        primary_info: none
        secondary_info: none
        icon_type: none
        hvac_modes:
          - auto
          - heat
          - 'off'

type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        primary: '{{state_attr(entity, ''current_temperature'')}} °C'
        secondary: Temperatura wody
        entity: climate.parter_podlogowka
        icon: mdi:water-thermometer
        name: Temperature
        icon_color: green
  - type: custom:mini-graph-card
    entities:
      - entity: climate.parter_podlogowka
        attribute: current_temperature
        name: Temperatura
        color: var(--green-color)
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: false
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.parter_podlogowka
        primary_info: none
        secondary_info: none
        icon_type: none
        show_temperature_control: true
      - type: custom:mushroom-climate-card
        entity: climate.parter_podlogowka
        primary_info: none
        secondary_info: none
        icon_type: none
        hvac_modes:
          - auto
          - heat
          - cool
          - 'off'

[royle (roy)]

That’s awesome. Thanks a lot.

Would someone managed to add animation?

Can I change the background color as well as the icon color according to the entity state?

[rhysb (Rhys)]

You can color the Tile background like this:

Tile Background Color

Light, switch or other On/Off Entity:

      - features:
          - type: light-brightness
        type: tile
        entity: light.office_light
        name: Light
        card_mod:
          style: |
            .background {
              {% if is_state(config.entity, 'on') %}
                background: color-mix(in srgb, var(--tile-color) 10%, var(--card-background-color));
              {% endif %}
            }

Other Entities:

      - type: tile
        entity: sensor.rhys_phone_battery_level
        card_mod:
          style: |
            .background {
              background: color-mix(in srgb, var(--tile-color) 10%, var(--card-background-color));
            }

The Tile will automatically change color based on the battery level.

[rhysb (Rhys)]

You can style a Mushroom Fan Timer Card like this:

Mushroom Fan Timer Card

type: custom:stack-in-card
cards:
  - type: custom:mushroom-fan-card
    entity: fan.bathroom_fan
    icon_animation: true
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0px;
        }
  - type: custom:mushroom-number-card
    entity: input_number.bathroom_fan_timer
    display_mode: buttons
    primary_info: none
    secondary_info: none
    icon_type: none
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 0px;
          right: 54px;
          width: calc(50% - 54px);
          --ha-card-border-width: 0px;
        }
  - type: custom:mushroom-entity-card
    entity: script.bathroom_fan_timer
    primary_info: none
    secondary_info: none
    icon: mdi:power
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 0px;
          right: 0px;
          width: fit-content;
          --ha-card-border-width: 0px;
        }
card_mod:
  style: |
    ha-card {
      {{ '--ha-card-background: color-mix(in srgb, var(--teal-color) 10%, var(--card-background-color));' if is_state('fan.bathroom_fan', 'on') }}
    }

[rhysb (Rhys)]

Any of the animations should work.

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

Mushroom Animations - Part 1 [Mushroom Chip Animated Scene] I thought I’d share some CSS animations I’ve been working on for Mushroom cards. All these CSS animations require Thomas Lovén’s card_mod. This can be installed via HACS. There are a few, so I’ll probably add them gradually. Make sure to return to this post so you don’t miss out. Built-in Mushroom Animations There are two built-in animations for Mushroom cards that can be used without specifying a…

[StickyClient]

Thanks for the answer. Tested but doesn’t seems to work, i’m using YAML mode so i think thats why it’s not working? There seems no way to blend the header with the Welcome Card so it becomes “one card” but keeping another header color for all other views. Maybe @rhysb have some magic left to fix this?