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

piitaya · March 25, 2022, 11:03am

Not possible for now (but you can use the temperature color slider to do this if your light support it).

Mushroom color slider only controls the hue parameter because the slider a 1 dimensional control.
If you want to control the “saturation” parameter you can use the more-info popup using a hold_action or a double_tap_action.

Maybe a solution can be to display 2 slider (one for hue, one for saturation). I don’t have the solution in term of design. Mushroom is a minimalist design system, it can be hard to add lot of feature with a minimalistic style.

piitaya · March 25, 2022, 11:04am

I think it’s better to use the standard layout instead of horizontal layout if you use 2 controls (buttons and slider).
The horizontal layout only allow 3 buttons instead due to the available space.

dicko · March 25, 2022, 11:37pm

Hi

My LEDs are only RGB ( I prefer a cool white colour, not exactly 255, 255, 255) and don’t have RGBW, so would that not just be another colour to choose ?

Thanks

Martyn

tvds · March 27, 2022, 12:39am

Your cards are absolutely amazing. Many thanks for all your hard work! Really appreciated.

I have a question. I want to change the icon color of a chip entity. It’s a sensor and shows the nr of ‘on’ lights on each floor (the 3 first chips).

Would be great to show the icon color of the chip entity of the corresponding floors in yellow only when the active lights > 0 and black when the active lights = 0.

mtrista · March 27, 2022, 2:21am

You can make a template chip and write the Jinja template logic for the icon color in the “Icon color” field.

However, I had a similar “problem” but I found a “solution” after realizing I don’t want to see those 0 chip cards anyway. I made a conditional chip that always has an amber color for the lights, but only shows the chip of it’s 1 more, so the color becomes irrelevant.

Teddy-Moeller · March 27, 2022, 6:34am

Hi Poul,

First thanks for some awesome cards!

As this is my first post, I still need to learn the do(s) and dont(s)
I hope this is the right forum to report a bug I found.
To recreate:

create a view in a dashboard in lovelace
set the “view type” to “Panel (1 card)”
add the mushroom alarm card as the first card
add history graph card as the second card

The bug is only visible in “Panel” mode, and is visible in:

FireFox, WaterFox, Edge browsers (Windows 11)
FireFox (Linux mint)
FireFox, Home Assistant app (Samsung S10+)

With different browsers and native app, I feel the bug must be in mushroom. Yet I am no developer, so I cannot be sure.

I tried to take a screenshot where it is easy visible, that the card has a lot of space in the top, and pushes the buttons down, under the next card

tvds · March 27, 2022, 8:36am

Many thanks for your proposal.
Are you able to share your config for this conditional chip ?

yosef · March 27, 2022, 7:53pm

Beautiful Cards. I’m updating my dashboard with these. Beginning with the covers card, as I’ve never been satisfied with other options.

I’d like to change the color of the icon from blue to #aa3251. For some reason it’s not working.

type: custom:mushroom-cover-card
entity: cover.blinds_office_west
color: null
show_buttons_control: true
show_position_control: true
icon: phu:blind-tilt-closed

and receive an error

Visual editor is not supported for this configuration:

* At path: color -- Expected a value of type `never`, but received: `null`

You can still edit your config in YAML.

Do I need to edit the YAML in the raw configuration editor?

piitaya · March 27, 2022, 8:17pm

For now, you can only use the color option for entity-card, template-card, entity-chip and template-chip.
You can customize all the cover-card color with theme : GitHub - piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards 🍄

mush-rgb-state-cover: 170, 50, 81      (#aa3251 color in rgb)

yosef · March 27, 2022, 8:56pm

Thanks. I’m using another theme for the Dashboard. How do I add the Mushroom theme while still keeping my overall theme “Caule Black Rose”

piitaya · March 27, 2022, 9:29pm

Just add mushroom variables in your current theme

yosef · March 28, 2022, 6:24am

Thanks.

I added this to the Caule-themes-pack-1.yaml and restarted HA. The icon is still blue.

Mushroom:
  # Mushroom
  mush-rgb-state-cover: 170, 50, 81

poudenes · March 28, 2022, 6:50am

I love the mushroom cards!!! Hope the FAN card will also get a off, low, mid, high option. See FAN intergration HA for right speed names

r1kkie · March 28, 2022, 6:52am

Just migrated from custom:button-card, amazing cards!

piitaya · March 28, 2022, 8:20am

Just add this line a the end of your theme

Caule Dark Gray:
  # Change the value below 8px to 0px to remove the rounded corners
  ha-card-border-radius: 8px
  # Main colors
  # ...
  # Mushroom variables
  mush-rgb-state-cover: 170, 50, 81

yosef · March 28, 2022, 9:59am

I added at end of theme

 # Mushroom variables
  mush-rgb-state-cover: 170, 50, 81

Caule Dark Gray:
  # Change the value below 8px to 0px to remove the rounded corners
  ha-card-border-radius: 8px
  # Main colors
  primary-color: "#acacac"
  light-primary-color: "#e2e2e2"
  graph-color: var(--primary-color)
  primary-background-color: "#1D1B1E"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#37373D"
  disabled-color: "#666666"
  # Text colors
  primary-text-color: "#e5e5e5"
  secondary-text-color: var(--disabled-color)
  text-primary-color: "#E5E5E5"
  disabled-text-color: var(--disabled-color)
  # Sidebar colors
  sidebar-icon-color: var(--primary-color)
  sidebar-text-color: var(--primary-text-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: var(--light-primary-color)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # Icons colors
  state-icon-color: var(--disabled-color)
  state-icon-active-color: var(--primary-color)
  state-icon-unavailable-color: var(--primary-background-color)
  # Settins and colors of Mini Media Player
  mini-media-player-icon-color: var(--primary-color)
  mini-media-player-accent-color: var(--primary-color)
  mini-media-player-progress-height: 8px
  # Papers slider colors
  paper-slider-knob-color: var(--primary-color)
  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-container-color: var(--disabled-color)
  # Labels colors
  label-badge-background-color: var(--divider-color)
  label-badge-text-color: var(--primary-text-color)
  label-badge-red: var(--primary-color)
  label-badge-blue: var(--light-primary-color)
  # Cards colors
  ha-card-background: "#2A282D"
  paper-card-background-color: var(--ha-card-background)
  paper-listbox-background-color: var(--primary-background-color)
  # Toggle button colors
  paper-toggle-button-checked-button-color: var(--primary-color)
  paper-toggle-button-checked-bar-color: var(--light-primary-color)
  paper-toggle-button-unchecked-button-color: var(--disabled-color)
  paper-toggle-button-unchecked-bar-color: var(--primary-background-color)
  # Switch colors
  switch-checked-color: var(--paper-toggle-button-checked-button-color)
  switch-unchecked-button-color: var(--paper-toggle-button-unchecked-button-color)
  switch-unchecked-color: var(--paper-toggle-button-unchecked-bar-color)
  switch-unchecked-track-color: var(--paper-toggle-button-unchecked-bar-color)
  # Table colors
  table-row-background-color: var(--divider-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  card-background-color: var(--primary-background-color)
  #Animated icons
  weather-icon-clear-night: url("/hacsfiles/themes/caule-themes-pack-1/clear-night.svg")
  weather-icon-cloudy: url("/hacsfiles/themes/caule-themes-pack-1/cloudy.svg")
  weather-icon-fog: url("/hacsfiles/themes/caule-themes-pack-1/fog.svg")
  weather-icon-lightning: url("/hacsfiles/themes/caule-themes-pack-1/lightning.svg")
  weather-icon-lightning-rainy: url("/hacsfiles/themes/caule-themes-pack-1/lightning-rainy.svg")
  weather-icon-partlycloudy: url("/hacsfiles/themes/caule-themes-pack-1/partlycloudy.svg")
  weather-icon-pouring: url("/hacsfiles/themes/caule-themes-pack-1/pouring.svg")
  weather-icon-rainy: url("/hacsfiles/themes/caule-themes-pack-1/rainy.svg")
  weather-icon-hail: url("/hacsfiles/themes/caule-themes-pack-1/hail.svg")
  weather-icon-snowy: url("/hacsfiles/themes/caule-themes-pack-1/snowy.svg")
  weather-icon-snowy-rainy: url("/hacsfiles/themes/caule-themes-pack-1/snowy-rainy.svg")
  weather-icon-sunny: url("/hacsfiles/themes/caule-themes-pack-1/sunny.svg")
  weather-icon-windy: url("/hacsfiles/themes/caule-themes-pack-1/windy.svg")
  weather-icon-windy-variant: url("/hacsfiles/themes/caule-themes-pack-1/windy-variant.svg")
  weather-icon-exceptional: url("/hacsfiles/themes/caule-themes-pack-1/exceptional.svg")
  # Shadown
  ha-card-box-shadow: "inset 0px 0px 0px 0px var(--divider-color)"
  # HACS
  hacs-badge-color: var(--primary-color)
  link-text-color: var(--disabled-color)
  markdown-code-background-color: var(--divider-color)
  google-blue-500: var(--primary-color)
  accent-color: var(--light-primary-color)
  hacs-chip-color: var(--primary-color)
  # Mushroom variables
  mush-rgb-state-cover: 170, 50, 81

Wolveras · March 28, 2022, 10:33am

I’m looking for a way to make a mushroom chip (open sidebar menu) only display on mobile devices. Is there an easy way to achieve this?

poudenes · March 28, 2022, 11:28am

Hi All,

Is it possible to change color icon based on state:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: binary_sensor.diningroom_detection
    content_info: name

What use the chips for my motion sensors but they not change color as default

cowboysdude · March 28, 2022, 11:45am

Saw the Youtube video on this… this is amazing!!!

Fabian_V · March 28, 2022, 12:35pm

interesting card, you can add chips in your header for example Header Cards - add badges and cards to the header - Share your Projects! - Home Assistant Community (home-assistant.io)