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

[Michael_Dahl]

I have also created an automation, the if the “input_boolean.notifications”, are on for more then 5 min, the set it to off (Auto close the bar)

[reypm]

show us the code

[Michael_Dahl]

alias: auto toogle input_boolean.notifications
description: ""
trigger:
  - platform: state
    entity_id:
      - input_boolean.notifications
    for:
      hours: 0
      minutes: 5
      seconds: 0
    to: "on"
condition: []
action:
  - if:
      - condition: state
        entity_id: input_boolean.notifications
        for:
          hours: 0
          minutes: 5
          seconds: 0
        state: "on"
    then:
      - service: input_boolean.turn_off
        data: {}
        target:
          entity_id: input_boolean.notifications
mode: single

[Tarcisio (Tarcisio Alves de Menezes)]

Hello guys!
Does anybody know how would be the yaml to change this --mdc-icon-size property in card-mod?
Changing on chrome does exactly what I need, but I can’t find out how I’m supposed to do in yaml.

[Sddawson]

Yes, I only want the Title text to be white. So I’ll have to stick with what I have. Appreciate the confirmation.

The animation problem is very puzzling. Even after an HA restart, it’s not working. So with this in the theme:

steve_theme:
  card-mod-theme: "steve_theme"
  card-mod-card: |
    .type-custom-mushroom-entity-card:active {
      transform: scale(0.85);
      transition: 0s;
    }

  card-mod-card-yaml: |
    mushroom-title-card$: |
      h1 {
        --primary-text-color: white;
      }
      h2 {
        --secondary-text-color: white;  
      }

and this (snippet) in my cards, the Eco+ button animates, but the Eco button doesn’t. Neither does any other standalone Mushroom Entity card. Can you spot anything?

  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: input_boolean.myenergi_mode_eco_2
        name: Eco+
        secondary_info: none
        layout: vertical
        tap_action:
          action: call-service
          service: input_boolean.turn_on
          data: {}
          target:
            entity_id: input_boolean.myenergi_mode_eco_2
        hold_action:
          action: more-info
        icon_color: blue
        card_mod:
          style: |
            ha-card:active {
                transform: scale(0.85);
                transition: 0s;
            }
      - type: custom:mushroom-entity-card
        entity: input_boolean.myenergi_mode_eco
        name: Eco
        secondary_info: none
        layout: vertical
        tap_action:
          action: call-service
          service: input_boolean.turn_on
          data: {}
          target:
            entity_id: input_boolean.myenergi_mode_eco
        hold_action:
          action: more-info
        icon_color: blue

Is this exactly the right syntax (for instance, with all dashes in the class)?

    .type-custom-mushroom-entity-card:active {
      transform: scale(0.85);
      transition: 0s;
    }

[rhysb (Rhys)]

You can control the Mushroom Badge & Icon sizes like this.

Mushroom Icon Size:

type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
  style: |
    :host {
      --mush-icon-size: 50px;
      --mush-icon-symbol-size: 0.8em;
    }

If you want to change it globally, then add this to your theme:

      mush-icon-size: 50px;
      mush-icon-symbol-size: 0.8em;

Mushroom Badge Size:

type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
badge_color: green
card_mod:
  style: |
    :host {
      --mush-badge-size: 20px;
      --mush-badge-icon-size: 0.6em;
    }

If you want to change it globally, then add this to your theme:

      mush-badge-size: 20px
      mush-badge-icon-size: 0.6em

[rhysb (Rhys)]

Yes, that looks correct.

Remove the mushroom-title-card card-mod and it should work fine.

Use just this:

steve_theme:
  card-mod-theme: "steve_theme"
  card-mod-card: |
    .type-custom-mushroom-entity-card:active {
      transform: scale(0.85);
      transition: 0s;
    }

[rhysb (Rhys)]

Sure, have a look here:

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

Not per room, but whole house is done. Mushroom low battery popup: [Low Battery] sensor: - platform: template sensors: devices_with_low_battery: friendly_name: 'Devices with Low Battery' unit_of_measurement: devices value_template: >- {% set ignore_entities = [] %} {{ states.sensor | selectattr('attributes.device_class', 'eq', 'battery') | rejectattr('entity_id', 'in', ignore_entities) | map(attribute…

[Sddawson]

Great, that worked. I didn’t realise I couldn’t have the Title stuff in there at the same time. So now every Title card has to have:

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: Car Charging
card_mod:
  style:
    mushroom-title-card$: |
      h1 {
        --primary-text-color: white;
      }
      h2 {
        --secondary-text-color: white;
      }

Is there any other way of avoiding coding this everywhere?

[spo0n125]

Thanks!!
I was missing that.

[sanil.heartbeats (Sanil Sahadevan)]

… excellent work…
Just started with mine…
BTW how did you integrate the computer…
Like CPU, Memory, C drive D drive etc…

[weppa]

Thanks mate, see HASS.Agent.

[sanil.heartbeats (Sanil Sahadevan)]

Thank you so much… will try it out this weekend…

[raic]

Hallo everybody. I’m new to the hassio and my english is not perfect. So, thanks a lot for understanding I was looking for a solution for longer time here, but I must give up. Probably you can help me.

I try to add a button for a group of lights which should change the color of the light (cold and warm). In my example, when I tap, the color should change to 4000 kelvin. So, the functionality is there, but I can not figure out how to change the button icon status, so that the icon color changes to green after the tap.

Thanks in advance!

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: 'Cold light'
    secondary: ''
    icon: mdi:snowflake
    icon_color: >-
      {{ 'green' if is_state('light.bulbs_group_salon', 'kelvin') == '4000' else
      '' }}
    layout: vertical
    tap_action:
      action: call-service
      service: light.turn_on
      target:
        entity_id: light.bulbs_group_salon
      data:
        kelvin: 4000

[delboydell]

Hello could somone help with changing the lock icon to the open one when the state changes, I have managed to get it to change colour from code in this thread- thank you. It would finish my dashboard off if I could get the icon to change too.

type: vertical-stack
cards:
  - type: custom:mushroom-template-card
    entity: binary_sensor.alarm_front_door_locked
    icon: mdi:lock
    icon_color: '{{ ''green'' if is_state(entity, ''off'') else ''red'' }}'
    tap_action:
      action: call-service
      service: switch.turn_on
      data: {}
      target:
        entity_id: switch.sonoff_10008bf604_1
    secondary_info: none

[Titom59]

hello, first of all I’m sorry for my English I use Google translate.
I’m new to Home Assistant, and I’m building a mobile dashboard.
I took part of the code to make this card. I see a line how can I eliminate it?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    entity: climate.thermostat_sejour
    hvac_modes:
      - heat
      - auto
      - fan_only
    show_temperature_control: true
    layout: horizontal
    name: Climat
    icon: mdi:thermometer-auto
    double_tap_action:
      action: more-info
  - type: custom:stack-in-card
    cards:
      - type: grid
        square: false
        columns: 2
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.sonde_salon_temp
            primary_info: state
            secondary_info: name
            name: Temperature
            icon_color: green
          - type: custom:mushroom-entity-card
            entity: sensor.sonde_salon_hum
            primary_info: state
            secondary_info: name
            name: Humidity
            icon: mdi:water-percent
            icon_color: blue
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.sonde_salon_temp
            name: Temperature
            color: green
          - entity: sensor.sonde_salon_hum
            name: Humidity
            color: '#2196f3'
            y_axis: secondary
        hours_to_show: 24
        points_per_hour: 2
        line_width: 3
        font_size: 50
        animate: true
        show:
          name: false
          icon: false
          labels: true
          state: false
          legend: false
          fill: fade
card_mod:
  style: |
    mushroom-shape-icon {
      {% if is_state(config.entity, 'heat_cool') %}
        --card-mod-icon: mdi:autorenew;
        animation: spin 3s ease-in-out infinite alternate;
      {% elif is_state(config.entity, 'heat') %}
        --card-mod-icon: mdi:fire;
        animation: heat 2s infinite;
      {% elif is_state(config.entity, 'cool') %}
        --card-mod-icon: mdi:snowflake;
        animation: cool 6s ease-in-out infinite;
      {% elif is_state(config.entity, 'dry') %}
        --card-mod-icon: mdi:water-percent;
        animation: dry 1.5s linear infinite;
      {% elif is_state(config.entity, 'fan_only') %}
        --card-mod-icon: mdi:fan;
        animation: spin 1s linear infinite;
      {% else %}
        --card-mod-icon: mdi:air-conditioner; 
      {% endif %}
      display: flex;
    }
    @keyframes cool {
      0%, 100% { transform: rotate(25deg); }
      25% { transform: rotate(-25deg); }
      50% { transform: rotate(50deg); }
      75% { transform: rotate(-50deg); }
    }
    @keyframes heat {
      0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
      10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
      20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
      30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
      40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
      50% { --icon-color: rgba(var(--rgb-red), 0); }
    }
    @keyframes dry {
      0%, 100% { --icon-symbol-size: 21px; }
      10%, 90% { --icon-symbol-size: 22px; }
      20%, 80% { --icon-symbol-size: 23px; }
      30%, 70% { --icon-symbol-size: 24px; }
      40%, 60% { --icon-symbol-size: 25px; }
      50% { --icon-symbol-size: 26px; }
    }

Thanks

[injectx]

Been trying to include some elements from the minimalist theme. I’ve reused code which was made by @rhysb for my room cards and made the background and icon colors adaptive based on dark/light mode.

Code for the room cards:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Woonkamer
    secondary: '{{states(''sensor.woonkamer_room_temperature'')}}°'
    icon: mdi:sofa
    entity: light.woonkamer
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    icon_color: |-
      {% if is_state('light.woonkamer', 'on') %}
        orange
      {% endif %}
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) ha-card {
          {% if is_state(config.entity, 'on') %}
            {% set r = state_attr(config.entity, 'rgb_color')[0] %}
            {% set g = state_attr(config.entity, 'rgb_color')[1] %}
            {% set b = state_attr(config.entity, 'rgb_color')[2] %}
            background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
            --primary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.99 );
            --secondary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.50 );
          {%- else -%}
          {%- endif %}
        }

        :host([dark-mode]) mushroom-shape-icon {
          {% if is_state(config.entity, 'on') %}
            {% set r = state_attr(config.entity, 'rgb_color')[0] %}
            {% set g = state_attr(config.entity, 'rgb_color')[1] %}
            {% set b = state_attr(config.entity, 'rgb_color')[2] %}
            --icon-color: rgba( {{r}}, {{g}}, {{b}}, 0.99 ) !important;
            --shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.20 ) !important;
          {%- else -%}
          {%- endif %}
        }
  - type: custom:mushroom-template-card
    primary: Keuken
    secondary: '{{states(''sensor.hue_motion_sensor_3_temperature_2'')}}°'
    icon: mdi:knife
    tap_action:
      action: toggle
    entity: light.keuken
    hold_action:
      action: more-info
    double_tap_action:
      action: none
    icon_color: |-
      {% if is_state('light.keuken', 'on') %}
        orange
      {% endif %}
    card_mod:
      style: |
        :host([dark-mode]) ha-card {
          {% if is_state(config.entity, 'on') %}
            {% set r = state_attr(config.entity, 'rgb_color')[0] %}
            {% set g = state_attr(config.entity, 'rgb_color')[1] %}
            {% set b = state_attr(config.entity, 'rgb_color')[2] %}
            background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
            --primary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.99 );
            --secondary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.50 );
          {%- else -%}
          {%- endif %}
        }
        :host([dark-mode]) mushroom-shape-icon {
          {% if is_state(config.entity, 'on') %}
            {% set r = state_attr(config.entity, 'rgb_color')[0] %}
            {% set g = state_attr(config.entity, 'rgb_color')[1] %}
            {% set b = state_attr(config.entity, 'rgb_color')[2] %}
            --icon-color: rgba( {{r}}, {{g}}, {{b}}, 0.99 ) !important;
            --shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.20 ) !important;
          {%- else -%}
          {%- endif %}
        }

The colored cards at the top are collapsible:

[mase]

looks great, what theme are you using?

[injectx]

I’ve customized the mushroom theme a bit:

# Theme based on Google light and dark modem UI
# Creator: Juan - @juanmtech
# Website: https://www.juanmtech.com
# YouTube Channel: https://youtube.com/juanmtech
# My Home Assistant Config files: https://github.com/JuanMTech/Home_Assistant_files
#
#
Google Mushroom:
  # Mushroom part
  ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
  ha-card-border-width: 0
  ha-card-border-radius: 20px
  modes:
    light:
      # Header:
      app-header-background-color: rgb(239, 239, 239)
      app-header-text-color: rgb(95, 99, 104)
      # Main Interface Colors
      primary-color: rgb(26, 115, 232)
      light-primary-color: var(--primary-color)
      primary-background-color: rgb(239, 239, 239)
      secondary-background-color: rgb(230, 230, 230)
      divider-color: var(--primary-background-color)
      accent-color: rgb(26, 115, 232)
      # Text
      primary-text-color: rgb(32, 33, 36)
      secondary-text-color: rgb(95, 99, 104)
      text-primary-color: rgb(255, 255, 255)
      disabled-text-color: rgba(95, 99, 104, 0.4)
      # Sidebar Menu
      sidebar-icon-color: rgb(95, 99, 104)
      sidebar-text-color: var(--sidebar-icon-color)
      sidebar-background-color: rgb(255, 255, 255)
      sidebar-selected-background-color: var(--primary-background-color)
      sidebar-selected-icon-color: rgb(26, 115, 232)
      sidebar-selected-text-color: var(--sidebar-selected-icon-color)
      # Buttons
      paper-item-icon-color: rgb(95, 99, 104)
      paper-item-icon-active-color: rgb(26, 115, 232)
      # States and Badges
      state-icon-color: rgb(26, 115, 232)
      state-icon-active-color: rgb(95, 99, 104)
      state-icon-unavailable-color: var(--disabled-text-color)
      # Sliders
      paper-slider-knob-color: rgb(26, 115, 232)
      paper-slider-knob-start-color: var(--paper-slider-knob-color)
      paper-slider-pin-color: var(--paper-slider-knob-color)
      paper-slider-active-color: var(--paper-slider-knob-color)
      paper-slider-secondary-color: var(--light-primary-color)
      # Labels
      label-badge-background-color: rgb(248, 250, 249)
      label-badge-text-color: rgb(77, 85, 117)
      label-badge-red: rgb(199, 72, 76)
      label-badge-green: rgb(109, 192, 113)
      label-badge-blue: rgb(26, 115, 232)
      label-badge-yellow: rgb(217, 183, 87)
      label-badge-gray: rgb(95, 98, 103)
      # Cards
      card-background-color: rgb(255, 255, 255)
      ha-card-background: rgb(255, 255, 255)
      ha-card-border-color: none
      ha-card-border-width: 0px
      paper-dialog-background-color: var(--card-background-color)
      paper-listbox-background-color: var(--card-background-color)
      paper-card-background-color: var(--card-background-color)
      # Switches
      switch-checked-button-color: rgb(26, 115, 232)
      switch-checked-track-color: rgb(26, 115, 232)
      switch-unchecked-button-color: rgb(189, 193, 198)
      switch-unchecked-track-color: rgb(189, 193, 198)
      # Toggles
      paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
      paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
      paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
      paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
      # Table
      table-row-background-color: var(--card-background-color)
      table-row-alternative-background-color: var(--primary-background-color)
      data-table-background-color: var(--primary-background-color)
      # Dropdowns
      material-background-color: var(--card-background-color)
      material-secondary-background-color: var(--primary-background-color)
      mdc-theme-surface: var(--primary-background-color)
      # Pre/Code
      markdown-code-background-color: rgb(242, 242, 242)
      # Checkboxes
      mdc-select-fill-color: rgb(255, 255, 255)
      mdc-select-ink-color: var(--primary-text-color)
      mdc-select-label-ink-color: var(--secondary-text-color)
      mdc-select-idle-line-color: var(--primary-text-color)
      mdc-select-dropdown-icon-color: var(--secondary-text-color)
      mdc-select-hover-line-color: var(--accent-color)
      # Input
      input-fill-color: var(--secondary-background-color)
      input-dropdown-icon-color: var(--secondary-text-color)
      input-ink-color: var(--primary-text-color)
      input-label-ink-color: var(--secondary-text-color)
      input-idle-line-color: var(--primary-text-color)
      input-hover-line-color: var(--accent-color)
    #
    dark:
      # Minimalist
      ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.90)
      # Header:
      app-header-background-color: rgb(17, 17, 17)
      app-header-text-color: rgb(198, 203, 210)
      # Main Interface Colors
      primary-color: rgb(138, 180, 248)
      light-primary-color: var(--primary-color)
      primary-background-color: rgb(17, 17, 17)
      secondary-background-color: rgb(32, 33, 36)
      divider-color: var(--primary-background-color)
      accent-color: rgb(138, 180, 248)
      # Text
      primary-text-color: rgb(242, 242, 242)
      secondary-text-color: rgb(166, 166, 166)
      text-primary-color: var(--primary-text-color)
      disabled-text-color: rgba(184, 190, 199, 0.4)
      # Sidebar Menu
      sidebar-icon-color: rgb(169, 177, 188)
      sidebar-text-color: rgb(198, 203, 210)
      sidebar-background-color: rgb(32, 33, 36)
      sidebar-selected-background-color: var(--primary-background-color)
      sidebar-selected-icon-color: rgb(138, 180, 248)
      sidebar-selected-text-color: var(--sidebar-selected-icon-color)
      # Buttons
      paper-item-icon-color: rgb(169, 177, 188)
      paper-item-icon-active-color: rgb(138, 180, 248)
      # States and Badges
      state-icon-color: rgb(138, 180, 248)
      state-icon-active-color: rgb(169, 177, 188)
      state-icon-unavailable-color: var(--disabled-text-color)
      # Sliders
      paper-slider-knob-color: rgb(138, 180, 248)
      paper-slider-knob-start-color: var(--paper-slider-knob-color)
      paper-slider-pin-color: var(--paper-slider-knob-color)
      paper-slider-active-color: var(--paper-slider-knob-color)
      paper-slider-secondary-color: var(--light-primary-color)
      # Labels
      label-badge-background-color: rgb(32, 33, 36)
      label-badge-text-color: rgb(198, 203, 210)
      label-badge-red: rgb(208, 101, 104)
      label-badge-green: rgb(128, 200, 132)
      label-badge-blue: rgb(138, 180, 248)
      label-badge-yellow: rgb(223, 194, 113)
      label-badge-gray: rgb(95, 98, 103)
      # Cards
      card-background-color: rgb(32, 33, 36)
      ha-card-border-color: none
      ha-card-border-width: 0px
      paper-dialog-background-color: var(--card-background-color)
      paper-listbox-background-color: var(--card-background-color)
      paper-card-background-color: var(--card-background-color)
      # Switches
      switch-checked-button-color: rgb(138, 180, 248)
      switch-checked-track-color: rgb(138, 180, 248)
      switch-unchecked-button-color: rgb(172, 176, 185)
      switch-unchecked-track-color: rgb(154, 160, 166)
      # Toggles
      paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
      paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
      paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
      paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
      # Table
      table-row-background-color: var(--primary-background-color)
      table-row-alternative-background-color: var(--secondary-background-color)
      data-table-background-color: var(--primary-background-color)
      mdc-checkbox-unchecked-color: rgb(169, 177, 188)
      # Dropdowns
      material-background-color: var(--secondary-background-color)
      material-secondary-background-color: var(--primary-background-color)
      mdc-theme-surface: var(--primary-background-color)
      # Pre/Code
      markdown-code-background-color: rgb(17, 17, 17)
      # Checkboxes
      mdc-select-fill-color: rgb(32, 33, 36)
      mdc-select-ink-color: var(--primary-text-color)
      mdc-select-label-ink-color: var(--secondary-text-color)
      mdc-select-idle-line-color: var(--primary-text-color)
      mdc-select-dropdown-icon-color: var(--secondary-text-color)
      mdc-select-hover-line-color: var(--accent-color)
      # Input
      input-fill-color: var(--secondary-background-color)
      input-dropdown-icon-color: var(--secondary-text-color)
      input-ink-color: var(--primary-text-color)
      input-label-ink-color: var(--secondary-text-color)
      input-idle-line-color: var(--primary-text-color)
      input-hover-line-color: var(--accent-color)

[cfnovais (Filipe Novais)]

Hello. I want to have all the chips without background and without the border.
I was able to hide the background but the border is still there.

Here’s the code:

square: false
columns: 5
type: grid
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: ''
        subtitle: 'Divisão:'
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
            }
        chips:
          - type: template
            content: 'Sala  '
            icon_color: green
            icon: mdi:sofa
            double_tap_action:
              action: none
            tap_action:
              action: more-info
            hold_action:
              action: none
            entity: cover.persiana_sala_esq

Can someone help me removing the border