Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

:metal:t3: :metal:t3:ā€¦ excellent workā€¦
Just started with mineā€¦
BTW how did you integrate the computerā€¦
Like CPU, Memory, C drive D drive etcā€¦

Thanks mate, see HASS.Agent.

1 Like

Thank you so muchā€¦ will try it out this weekendā€¦

Hallo everybody. Iā€™m new to the hassio and my english is not perfect. So, thanks a lot for understanding :wink: 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

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

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

5 Likes

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:

9 Likes

looks great, what theme are you using?

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)

4 Likes

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

myself i add the below code and once adding it after chip entire it worked as you wanted

                card_mod:
                  style: |
                    ha-card
                      {background: transparent;
                       border-style: none;
                      }

Hi. Can you show your code for this view ?

Is there someone how knows how to create this with an input card from mushroom? I want to use it in my vacuum card. I know its possible with styling but i cannot achieve this.

Group 20

1 Like

It didnā€™t work for me The border is still visible

Update:
Nailed it:

card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
            }

how do you use this theme on your HA? I mean how do you include it in config files? :thinking:

The room card uses the custom:vertical-stack-in-card

Here is one of the rooms:
image

It has a quite simple code, you can also use the visual editor with this

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    secondary: Cucina e soggiorno
    icon: mdi:sofa
    tap_action:
      action: navigate
      navigation_path: soggiorno
    icon_color: blue
    multiline_secondary: true
    primary: Zona giorno
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.temperatura_soggiorno
        icon_color: blue
      - type: entity
        entity: sensor.umidita_soggiorno_knx
        icon_color: blue

Inside your ā€˜CONFIGā€™ folder there is a folder ā€˜themesā€™. There should be a folder ā€˜mushroomā€™. Duplicate that folder and rename it to whatever you like. Then rename the yaml file inside it and paste my code inside the file. Reboot.

I do not have such a folder thereā€¦

image

should I install a mushroom theme?

Since youā€™re replying in the Mushroom Cards topic I thought you already had that installed but yeah, please install.

Are you talking about the same theme? I am very confused :crazy_face: