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

Iā€™m using the color #646464, when the entity is off/inactive - seems to match :slight_smile:

I use a different image in every page,
I found them here: Upklyak | Freepik

This is the image: Free Vector | Summer forest with country house. forester cottage with woodpile. vector cartoon illustration of woods landscape with trees, green grass, path and farmhouse

2 Likes

What am I missing? The border is still there.

image

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: light.arbeiten
    icon_color: lime
    hide_icon: false
    secondary_info: none
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: /lovelace-details/arbeiten
    icon: mdi:chair-rolling
  - type: custom:mushroom-chips-card
    chips:
      - type: light
        entity: light.arbeiten
        content_info: none
        use_light_color: false
      - type: template
        content: >-
          {{ state_attr('climate.temperatur_arbeiten',
          'current_temperature')|float}}Ā°C
        tap_action:
          action: none
      - type: entity
        entity: sensor.window_arbeiten
        content_info: none

Try mushroom template in vertical stack first.
I didnā€™t try on chips.

1 Like

Seems to but doesnā€™t :wink:

image

Left: custom:mushroom-template-card with your color proposal.
Right: custom:mushroom-entity-card

The ā€œproblemā€ is not the color but the grey circle.

As Paul said we have to wait cause if use the color I have the circle but the right icon color. If I don#t use a color I get the wrong icon color but no circle.

OCD!

No.

image

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home
  - type: custom:mushroom-chips-card
    chips:
      - type: light
        entity: light.arbeiten
        content_info: none
        use_light_color: false
      - type: template
        content: >-
          {{ state_attr('climate.temperatur_arbeiten',
          'current_temperature')|float}}Ā°C
        tap_action:
          action: none
      - type: entity
        entity: sensor.window_arbeiten
        content_info: none

1 Like

Itā€™s the box shadow on the chips and entity card. I removed it with card_mod.

image

3 Likes

Iā€™d love to see the code for this as I think your room cards are awesome.

1 Like

Can this be an inspiration?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-entity-card
    entity: light.arbeiten
    icon_color: lime
    hide_icon: false
    secondary_info: none
    tap_action:
      action: navigate
      navigation_path: /lovelace-details/arbeiten
    icon: mdi:chair-rolling
    card_mod: null
    style: |
      ha-card {
        box-shadow: 0px 0px;
      }
  - type: custom:mushroom-chips-card
    chips:
      - type: light
        entity: light.arbeiten
        content_info: none
        use_light_color: false
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
      - type: template
        content: >-
          {{ state_attr('climate.temperatur_arbeiten',
          'current_temperature')|float}}Ā°C
        tap_action:
          action: none
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
      - type: entity
        entity: sensor.window_arbeiten
        content_info: none
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }

It looks good on my (apparently shitty) monitor, but when I check I agree itā€™s not perfect at all. Sorry. Iā€™ll do better next time :wink:

Your effort is appreciated :+1:t3:

Itā€™s not the color, itā€™s the surrounding circle that doesnā€™t suit my eyes.

Here is the code, with the template card.

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
    card_mod: null
    style: |
      ha-card {
        box-shadow: 0px 0px;
      }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.temperatura_soggiorno
        icon_color: blue
        card_mod: null
        style: |
          ha-card {
              box-shadow: 0px 0px;
          }
      - type: entity
        entity: sensor.umidita
        icon_color: blue
        card_mod: null
        style: |
          ha-card {
            box-shadow: 0px 0px;
          }
alignment: center

7 Likes

awesome. looks better without shadow :slight_smile:

Thatā€™s brilliant. Thank you. I can see several ours of playing with yaml in my immediate future.

This theme is awesome. Thank you for all you efforts.

The room cards toggle the main light in each room. For some rooms I have extra dashboards which can be reached by the three dots.

Love it!

7 Likes

Is there any way of changing the font size in the title card? Or even making the text bold? Sorry if itā€™s a stupid question. Iā€™m pretty new to home assistant

EDIT: after restart of HA it works again. I do wonder however whatā€™s the best way to find out what happened?

ā€”ā€”ā€”

Since this morning all my lights and fan controls only turn the switch on. But the colour of the icon never changes and I canā€™t turn it off again.

They are set to toggle on tap.

They are Tuya wall switches exposed as lights / fan.

Not sure how to troubleshoot this. Any advise?

Is it possible to programmatically change the background color of a chip? not just the icon color

1 Like

Brilliant. I just love the Chips. I think it raises the bar for dashboards.
BTW the coffee thing doesnā€™t accept pre-paid Visa. You might want to consider using Paypal for contributions.

Hey there,

maybe Iā€™m blind, but where do I get this Mushroom.js file from? Canā€™t find it in the git?

It doesnā€™t work for me to install it directly from hacs.

I downloaded the whole ZIP from Git and searched every folderā€¦