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

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


Hello, thank you for your work, I am using this card everywhere, I have a question, can you tell me if it is possible to invert this colors in the position slider of a cover card, I am trying with Card-Mod but it nothing, I want the darker color in the place of the light one and vice versa. thanks so much

Thanks for your input. I havenā€™t had a single failure yet on 1.2.6 regarding the sliders - In addition to no longer experiencing the ā€˜deadā€™ controls issue, I find them easier to work now - like it seems you donā€™t have to be exactly on the edge of the control for them to work - much better!

Thanks for your input on the colors - I actually think that Iā€™m warming to the way you handled it out of the box now. It also helps that instead of 50/50 Mushroom/HA controls my dashboard is more like 90/10 now :slight_smile:

How can I Change the icon color based on attribute state?

entity: media_player.home_theater
attr: source
data: Blu-ray

Thank you, :slight_smile:

1 Like

Attribute is source and what is data in this context? Is it a nested attribute?

I think I got what you mean. Must be sth like


{{ 'green' if state_attr('media_player.home_theater', 'source') == 'Blu-ray' else 'red' }}

I can give you more details if you post a snapshot of the attributes list.

2 Likes