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

If I change mush-chip-height: 36px to 60px for example, I get big chips, nothing else needed.
Have you reloaded the theme after making changes?

I had to restart HA to get it working, strange as some template changes are direct visibleā€¦ but sorted it outā€¦

thanks

What an amazing collection of cards! I rebuilt my entire dashboard, 150+ devices, in just a few hours. I was worried about the lack of customization, but its amazing how flexible the template card is as well as the chip template card. Very, very nice work. Iā€™m also pleased at how much complexity was removed, and how much YAML was eliminated - even if I am very comfortable working with it. And my dashboard is even more beautiful now!

One question - is it possible to use mdi icons in the title card? I inserted unicode icons easily, but would prefer to use MDI for UI consistency.

I will be eagerly following this project

1 Like

Hello,
In the inactive state, how to adjust the color of the status bar is not visible in all dark templatesā€¦


2 Likes

Going to need some info on that sidebar. It looks great.

Iā€™ve explained the details of the sidebar and shared the code in my other replies. Hope it helps!

Iā€™m experiencing this same issue in my dark theme as well. Anyone have any ideas? Or my guess is there may need to be an adjustment in the code for the slider card in Mushroom.

Is there plans to make the room card from minimalist in mushroom?

3 Likes

would you mind sharing / shwoing your dashboards ?
I;m sure there would be plenty of requests to share the code :smiley:

2 Likes

hello,
I used header_cards to put chips in it. I changed the size of the chips but itā€™s not aligned

chip

how could i lower the chips to align them?

my code:

header_cards:
  cards:
    - type: glance
      entities:
        - entity: alarm_control_panel.54ef44273cc1_alarm
        - entity: group.grp_portes
          style: |
            :host {
              --mdc-icon-size: 26px;
            }
        - entity: group.grp_fenetres
        - entity: sun.sun
        - entity: sensor.moon
      show_name: false
      show_icon: true
      show_state: false
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: none;
        }
        :host {
          --mdc-icon-size: 23px;
        }
    - type: custom:mushroom-chips-card
      chips:
        - type: weather
          entity: weather.xxxxxxxxx
          show_conditions: false
          show_temperature: true
          style: |
            ha-card {
              background-color: transparent;
              box-shadow: none;
            }
        - type: entity
          entity: sensor.xxxxxxxxx_wind_speed
          style: |
            :host {
              --card-mod-icon-color: #44739e;
            }
            ha-card {
              background-color: transparent;
              box-shadow: none;
            }
2 Likes

For those who use Card-Mod, hereā€™s a small example how to bypass the limitations of the default Conditional Card in Mushroom Chip Card:


type: custom:mushroom-chips-card
chips:
  - type: ā€¦
    card_mod:
      style: |
        :host { display:
          {% set x = ['unavailable', 'unknown', 'none'] %}
          {% set e = states('sensor.mobile_battery_level') %}
          {% set b = (e|float(100) <= 35) %}
          {{ 'inline' if b or e in x else 'none' }}; }

6 Likes

Again, awesome and beautiful cards! Ive used them extensively and am stuck on three areas:

#1. Iā€™m on HA 2022.3.3 and use HA/Mushroom on a Mac with MacOS 12.3/Safari and on iOS running 15.4. Frequently when returning from a different app Iā€™m unable to activate any of the controls with sliders. A quick refresh solves this and they work again, but it happens dozens of times a day. Thoughts? I can open an issue on Github if necessary.

#2. I looked through the Mushroom Theme documentation and figured out how to change the font and chip sizes easily, but I havenā€™t been able to figure out how to change the background color on the title card. Running either no theme or the Mushroom theme shows a black background while all other cards are grey. Iā€™m looking too make it match for consistency.

#3 Is it possible to change the icon color in the cards? I see several of the cards have a single icon color setting, but my issue is that Mushroom uses different colors then Home Assistant. For example, an open door in HA is yellow, and a closed door is blue, while an unavailable door is grey. In Mushroom, an open door is blue, and a closed door is grey. Iā€™m finding this very confusing when Iā€™ve been used to the colors for a long time, and of course my entire dashboard isnā€™t Mushroom (yet) :slight_smile:. There doesnā€™t seem to be any CSS variables for those that I could find. I can, of course, use the template card and have done this successfully, but this requires me to write YAML for every card which I donā€™t really have the time for. I also tried to look at mushroom.js, but Iā€™m not a javascript guy and wasnā€™t able to get very far.

1 Like

Issue 1 also is there on Android 12, one UI 4.0.

Thankā€™s for your message :slightly_smiling_face:

#1 itā€™s a known issue. Some people reported it. I just pushed a fix with the 1.2.6 version :slightly_smiling_face:

#2 #3 The documentation and guidelines must be improved.
The rules about the colors are different from HA.

  • active state => colored
  • unactive state => grey
  • unavailable state => grey with a orange badge
    We preferred to use a badge instead of just color to better show the difference with a normal state.

If you want custom color, you can look at the template card for now.

2 Likes

Is there a way when using the template card for an input_setect entity to have it a color whin it as a specific option and all other options itā€™s grey?

Yep you can use template to define color.

type: custom:mushroom-template-card
icon: mdi:movie-filter-outline
entity: input_select.movie_mode
secondary: Cinema
icon_color: '{{ iif(is_state(entity, "Cinema"), "deep-purple", "") }}'
2 Likes

Set your primary-text-color to a HEX rather than an RGBA value.

The slider converts the HEX for primrary-text-color and then applies an alpha channel. If you already have RGBA setup for primary-text-color the slider doesnt get a colour.

2 Likes

For the upcoming climate card, hopefully we can get a card background color option like in the Behance and Minimalist UI? It looks super cool. Thank you for your great work

image

1 Like

Thank Youā€¦

Hello!

Amazing cards! One suggestion I have though is to add a small notification that shows the % you are adjusting to, for brightness, cover position, temperature etcā€¦

4 Likes