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

Share your Projects!
,
6199

In the custom-bar component, i was trying to add conditional colors as shown in the post below.

https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/3248

in the part of the code which is as follows

- type: custom:bar-card
        entity: sensor.furnace_filter_days_remaining
        height: 42px
        min: '0'
        max: '182'
        entity_row: true
        severity:
          - color: rgb(var(--mush-rgb-green))
            from: 91
            to: 182
          - color: rgb(var(--mush-rgb-orange))
            from: 21
            to: 90
          - color: rgb(var(--mush-rgb-red))
            from: 0
            to: 30

This part was always giving error and the color output was not generating. The bar was generating without any color.

In one of the subsequent replies to a similar query, the reply was to add the mushroom variables to the theme file.
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/3259

So i copied, all the variables mentioned in that page
starting with…

ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)

There were variables for colors also… like

mush-rgb-red: 244, 67, 54
    mush-rgb-pink: 233, 30, 99
    mush-rgb-purple: 156, 39, 176
    mush-rgb-deep-purple: 103, 58, 183
    mush-rgb-indigo: 63, 81, 181
    mush-rgb-blue: 33, 150, 243
    mush-rgb-light-blue: 3, 169, 244
    mush-rgb-cyan: 0, 188, 212

etc

In another post later, i saw this
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/3839

It mentioned that
Thanks to @piitaya for adding all the Mushroom :mushroom: colors to HA as RGB variables. You don’t have to define them in your theme as mush-rgb-<color> anymore, and you can use them with any card.

So i tried those --rgb-green-color too in my code, but again there was no color generated.

Today, i saw your current code where you have mentioned

:host {

                        /* Define Person State colors. Can be added to theme */
                        --state-person-home: var(--green-color);
                        --state-person-not-home: var(--red-color);
                        --state-person-zone: var(--blue-color);
                        --state-person-unknown: var(--grey-color);

                        /* Set Person State color */
                        --state-person:
                        {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                          var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                        {% else %}
                          var(--state-person-zone)
                        {% endif %};

when i used, the var(--green-color); in my code, the colors were generated for the custom-bar component.

6200

Hello.
Nice work.
How do you define this one :
binary_sensor.rhys_phone_is_charging

1 Like
6201

That functionality is already built in to the Mushroom Light Card.

Use light color

If you want to replicate that behavior with the Mushroom Template card, you can do so like this:

type: custom:mushroom-template-card
icon: mdi:led-strip-variant
icon_color: |
  {% if is_state(entity, 'on') %}
    {{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
  {% endif %}
entity: light.lounge_cabinet
primary: '{{ state_attr(entity, ''friendly_name'') | title }}'
secondary: '{{ states(entity) | title }}'
1 Like
6202

That’s from the HA Android app. Have a look at the Companion App reference reypm posted above :point_up_2:.

6203

Great work.
Two questions.
How do you get the red dot in notification.
i’ve just create an input boolean basic.

Second. How to use another weather provider?
Thanks a lot

1 Like
6204

Paul added the --rgb-[color]-color's to HA but these were subsequently removed after some debate. There are still the HEX variables included in HA which are --[color]-color. These can be used in any card that accepts a HEX value.

Mushroom cards create --rgb-[color] using --mush-rgb-[color] if it exists and --default-[color] if not. --rgb-[color] and --default-[color] can only be used within a Mushroom card.

If you want to use Mushroom colors outside of Mushroom cards you can use --[color]-color or if you need RGB colors you can define them in your theme using --mush-rgb-[color]. When defining variables in your theme you drop the preceding --.

1 Like
6205

nice dashboard for google nest hub can you share code pleas ?

6206

How you read temp from UDM Pro ?

6207

With Unifi Protect integration

Capture d'écran 2023-03-29 100643

it will be necessary to activate the sensor in the diagnostics

6208

But if i dont use protect and only use NETWORK i can do this integration ?

6209

Can you show your code fro this card with cpu and memory ?

6210

Use the waze integration for this one

6211

Of course.

        type: horizontal-stack
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: CPU
                secondary: UDM-Pro
                icon: phu:unifi
                layout: vertical
                entity: sensor.unifi_gateway_wan_cpu
                icon_color: |2-
                            {% set bl = states('sensor.unifi_gateway_wan_cpu') | int %}
                            {% if bl < 10 %} green
                            {% elif bl < 20 %} green
                            {% elif bl < 30 %} green
                            {% elif bl < 40 %} green
                            {% elif bl < 50 %} orange
                            {% elif bl < 60 %} orange
                            {% elif bl < 70 %} red
                            {% elif bl < 80 %} red
                            {% elif bl < 90 %} red
                            {% elif bl < 100 %} red
                            {% elif bl == 100 %} red
                            {% else %} grey
                            {% endif %}
                badge_color: ''
                tap_action:
                  action: none
                card_mod:
                  style: |
                    ha-card { 
                      background: transparent !important;
                      border-radius: 20px !important;
                      box-shadow: none !important;
                      margin: 0px 5px;
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: none
                    icon: ''
                    icon_color: orange
                    content: '{{ states(''sensor.unifi_gateway_wan_cpu'')}} %'
                    tap_action:
                      action: none
                    card_mod:
                      style: |
                        ha-card {
                          --chip-border-width: 0;
                alignment: center
                card_mod:
                  style:
                    style: |
                      ha-card {
                        margin: -2px 0px 12px;
                        --chip-background: rgba(var(--rgb-disabled), 0.15);
                        --ha-card-box-shadow: none;
                        --chip-border-radius: 12px;
                        --chip-height: 40px;
                        --chip-padding: 12px;
                        --chip-spacing: 0px;
                      }
            card_mod:
              style: |
                ha-card { 
                  background: rgba(0,0,0,0.2) !important;
                  border-radius: 20px !important;
                  margin: 0 5px;
                }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: RAM
                secondary: UDM-Pro
                icon: mdi:memory
                layout: vertical
                entity: sensor.unifi_gateway_wan_mem
                icon_color: |2-
                            {% set bl = states('sensor.unifi_gateway_wan_mem') | int %}
                            {% if bl < 10 %} green
                            {% elif bl < 20 %} green
                            {% elif bl < 30 %} green
                            {% elif bl < 40 %} green
                            {% elif bl < 50 %} green
                            {% elif bl < 60 %} green
                            {% elif bl < 70 %} orange
                            {% elif bl < 80 %} orange
                            {% elif bl < 90 %} red
                            {% elif bl < 100 %} red
                            {% elif bl == 100 %} red
                            {% else %} grey
                            {% endif %}
                badge_color: ''
                tap_action:
                  action: none
                card_mod:
                  style: |
                    ha-card { 
                      background: transparent !important;
                      border-radius: 20px !important;
                      box-shadow: none !important;
                      margin: 0 5px;
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: none
                    icon: ''
                    icon_color: orange
                    content: '{{ states(''sensor.unifi_gateway_wan_mem'')}} %'
                    tap_action:
                      action: none
                    card_mod:
                      style: |
                        ha-card {
                          --chip-border-width: 0;
                alignment: center
                card_mod:
                  style:
                    style: |
                      ha-card {
                        margin: -2px 0px 12px;
                        --chip-background: rgba(var(--rgb-disabled), 0.15);
                        --ha-card-box-shadow: none;
                        --chip-border-radius: 12px;
                        --chip-height: 40px;
                        --chip-padding: 12px;
                        --chip-spacing: 0px;
                      }
            card_mod:
              style: |
                ha-card { 
                  background: rgba(0,0,0,0.2) !important;
                  border-radius: 20px !important;
                  margin: 0 5px;
                }
          - type: custom:vertical-stack-in-card
            cards:
              - type: custom:mushroom-template-card
                primary: Température
                secondary: UDM-Pro
                icon: mdi:thermometer
                layout: vertical
                entity: sensor.dalg_udm_cpu_temperature
                icon_color: |2-
                            {% set bl = states('sensor.dalg_udm_cpu_temperature') | int %}
                            {% if bl <= 40 %} green
                            {% elif bl <= 45 %} orange
                            {% elif bl >= 50 %} red
                            {% else %} grey
                            {% endif %}
                badge_color: ''
                tap_action:
                  action: none
                card_mod:
                  style: |
                    ha-card { 
                      background: transparent !important;
                      border-radius: 20px !important;
                      box-shadow: none !important;
                      margin: 0 5px;
                    }
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: none
                    icon: ''
                    icon_color: orange
                    content: '{{ states(''sensor.dalg_udm_cpu_temperature'')}}°C'
                    tap_action:
                      action: none
                    card_mod:
                      style: |
                        ha-card {
                          --chip-border-width: 0;
                alignment: center
                card_mod:
                  style:
                    style: |
                      ha-card {
                        margin: -2px 0px 12px;
                        --chip-background: rgba(var(--rgb-disabled), 0.15);
                        --ha-card-box-shadow: none;
                        --chip-border-radius: 12px;
                        --chip-height: 40px;
                        --chip-padding: 12px;
                        --chip-spacing: 0px;
                      }
            card_mod:
              style: |
                ha-card { 
                  background: rgba(0,0,0,0.2) !important;
                  border-radius: 20px !important;
                  margin: 0 5px;
                }
6212

Thank you so much for the detailed info… though i didnt understand a major portion of it…(not really a programmer… just hobby diy’s)… anyways… will try to understand the content with time as i proceed further… as i develop my dashboard further…

1 Like
6213

It counts the active items in the lights, windows, external doors and low batteries groups. If the count is greater than 0, then it turns the notification dot on.

You could replace the weather info card with this:

      - type: custom:mushroom-template-card
        primary: '{{ state_attr(entity, ''temperature'') | round(1) }} °C'
        secondary: |-
          {% set conditions = {
                'clear-night': 'Clear, night',
                'cloudy': 'Cloudy',
                'fog': 'Fog',
                'hail': 'Hail',
                'lightning': 'Lightning',
                'lightning-rainy': 'Lightning, rainy',
                'partlycloudy': 'Partly cloudy',
                'pouring': 'Pouring',
                'rainy': 'Rainy',
                'snowy': 'Snowy',
                'snowy-rainy': 'Snowy, rainy',
                'sunny': 'Sunny',
                'windy': 'Windy',
                'windy-variant': 'Windy',
                'exceptional': 'Exceptional'
              } %}
        
          {{ conditions[state_attr(entity, 'forecast')[0]['condition']] }}        
        icon: none
        entity: weather.weatherflow_weather_hourly
        picture: >-
          {% set condition = states(entity)  %}

          {% if condition == 'partlycloudy' and is_state('sun.sun',
          'below_horizon') %}
            {% set condition = condition + '-night' %}
          {% endif %}

          /local/weather_icons/anim/{{ condition }}.svg
        tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Weather
                content:
                  type: custom:layout-card
                  layout_type: masonry
                  layout: {}
                  cards:
                    - type: custom:weather-card
                      entity: weather.weatherflow_day_based_forecast
                      number_of_forecasts: '5'
        card_mod:
          style:
            mushroom-state-info$: |

              /* Align text on the right */
              .container {
                transform: scaleX(-1);
                text-align: right;
                width: fit-content;
              }
            .: |
              ha-card {

                /* Move icon to the right */
                transform: scaleX(-1);

                /* Enlarge icon & remove circular shape */
                --icon-size: 42px;
                --icon-border-radius: 0;

                /* Style secondary text */
                --card-secondary-font-weight: normal;

                /* Remove styling from card */
                --ha-card-background: none;
                --ha-card-box-shadow: none;
                --ha-card-border-width: 0;
                padding: 0px !important;
                
                transition: all 0s;
              }
2 Likes
6214

Could you share or explain what are you using under the hood for sensor.devices_with_low_battery?

6215

Have a look here:

2 Likes
6217

image
image
As you can see 10 covers are open and no red dot

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: menu
      - type: template
        content: '{{ states(''sensor.current_date'') }} {{ states(''sensor.time'') }}'
        card_mod:
          style: |
            /* Style date & time */
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border-width: 0;
            }
      - type: template
        entity: input_boolean.notifications
        icon: mdi:bell
        tap_action:
          action: toggle
        hold_action:
          action: none
        card_mod:
          style: |
            /* Notification indicator */
            ha-card:after {
              /* Turn on indicator if there is a notification */
              {% set notifications = (expand(states.group.all_lights) | selectattr('state', 'eq', 'on') | list | count)
                                   + (expand(states.group.all_doors_sensor_entities) | selectattr( 'state', 'eq', 'on') | list | count) 
                                   + (expand(states.cover.volets_maison) | selectattr( 'state', 'eq', 'open') | list | count) 
              {% if notifications > 0 %}
                content: "";
              {% endif %}

              /* Position & style notification */
              position: absolute;
              background: rgb(var(--rgb-red));
              border-radius: 50%;
              top: 6px;
              right: 6px;
              width: 8px;
              height: 8px;
            } 
    alignment: justify
  - type: conditional
    conditions:
      - entity: input_boolean.notifications
        state: 'on'
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: alarm_control_panel.maison
          icon: mdi:shield-home
          icon_color: |-
            {% set alarm_status = states(entity) %}
            {% if alarm_status == 'armed_home' %} 
              green
            {% elif alarm_status == 'disarmed' %}
              blue
            {% elif alarm_status == 'arming' %}
               yellow
            {% elif alarm_status == 'triggered' %}
               red
            {% endif %} 
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Alarm
                content:
                  type: custom:mushroom-alarm-control-panel-card
                  entity: alarm_control_panel.maison
                  states:
                    - armed_home
                    - armed_away
          hold_action:
            action: none
        - type: template
          entity: lock.nuki_porte_entree_lock
          icon: '{{ ''mdi:lock'' if is_state(entity, ''locked'') else ''mdi:lock-open'' }}'
          icon_color: '{{ ''green'' if is_state(entity, ''locked'') else ''red'' }}'
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Front Door
                content:
                  type: custom:stack-in-card
                  cards:
                    - type: custom:layout-card
                      layout_type: masonry
                      layout: {}
                      cards:
                        - type: custom:frigate-card
                          cameras:
                            - camera_entity: camera.nvr_sub
                          dimensions:
                            aspect_ratio_mode: dynamic
                    - type: custom:mushroom-lock-card
                      entity: lock.nuki_porte_entree_lock
                card_mod:
                  style: |
                    .content {
                    }
        - type: conditional
          conditions:
            - entity: group.all_lights
              state: 'on'
          chip:
            type: template
            icon: mdi:lightbulb
            entity: group.all_lights
            content: >
              {{ expand(states.group.all_lights) | selectattr('state', 'eq',
              'on') | list | count }}
            icon_color: amber
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Lights On
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.all_lights
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            show_brightness_control: true
                            layout: horizontal
                            tap_action:
                              action: toggle
                            use_light_color: true
                        - entity_id: group.all_lights
                          state: 'on'
                          options:
                            type: custom:mushroom-light-card
                            layout: horizontal
                            secondary_info: none
                            tap_action:
                              action: toggle
                            card_mod:
                              style: |
                                /* Style & position All Lights button */
                                ha-card {
                                  background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
                                }
                                :host {
                                  margin: 0px 0px 12px !important;
                                }
                      exclude: []
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: group.all_doors_sensor_entities
              state: 'on'
          chip:
            type: template
            icon_color: |-
              {{ 'green' if is_state('group.all_doors_sensor_entities', 'off')
                            else 'red' }}
            icon: >-
              {{ 'mdi:door-closed' if
              is_state('group.all_doors_sensor_entities', 'off')
                            else 'mdi:door-open' }}
            entity: group.all_doors_sensor_entities
            content: >
              {{ expand(states.group.all_doors_sensor_entities) |
              selectattr('state', 'eq', 'on') | list | count }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Accès Ouverts
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: group.all_doors_sensor_entities
                          state: 'on'
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
        - type: conditional
          conditions:
            - entity: cover.volets_maison
              state: open
          chip:
            type: template
            entity: cover.volets_maison
            content: >
              {{ expand(states.cover.volets_maison) | selectattr('state', 'eq',
              'open') | list | count }}
            icon_color: |-
              {{ 'blue' if is_state('cover.volets_maison', 'open')
                            else 'green' }}
            icon: >-
              {{ 'mdi:window-shutter-open' if is_state('cover.volets_maison',
              'open')
                            else 'mdi:window-shutter' }}
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Volets Ouverts
                  content:
                    type: custom:auto-entities
                    filter:
                      include:
                        - group: cover.volets_maison
                          state: open
                          options:
                            type: custom:mushroom-entity-card
                            layout: horizontal
                            secondary_info: last-changed
                            icon_color: brown
                            tap_action:
                              action: none
                            hold_action:
                              action: none
                      exclude: []
                    show_empty: false
                    card:
                      type: custom:layout-card
                      cards: []
                      layout_type: masonry
                    sort:
                      method: friendly_name
                  card_mod:
                    style: |
                      /* Position & style buttons */
                      .content {
                        margin: -24px -16px -24px -16px !important;
                        --ha-card-border-width: 0;
                        --ha-card-background: none;
                        --ha-card-box-shadow: 0;
                        --masonry-view-card-margin: -12px 0px 0px 0px;
                      }
      alignment: end
      card_mod:
        style: |
          /* Set margins on notification chips */
          ha-card {
            margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
            transition: all 0s;
          }
card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;

      /* Remove gap at top of card */
      margin-top: calc(-1 * var(--mush-chip-spacing, 8px));

      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 9;
      top: var(--header-height);
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";

      /* Make fixed so element scrolls up */
      position: fixed;
      top: var(--header-height);

      /* Adjust height when notifications visible */
      height: {{ '104px' if is_state('input_boolean.notifications', 'on') else '60px' }};

      /* Set width to match */
      width: calc(100% - var(--mush-chip-spacing, 8px));
      max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));

      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);

      /* Position between chips and background pseudo elemnt */
      z-index: -1;

      /* Match background to main card */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";

      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;

      /* Adjust width to account for border */
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));

      /* Position card at back */
      z-index: -1;

      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.8);

      /* Set styling of card */
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
    }

Foe the weather i’d like to replace weatherflow with openweathermap for exemple

6218

Is it possible to add a name to a mushroom chip card type entity?

6219

Simple function idea to find phone. I like it. I just added timeout to it so do will no ring forever if you do not find your phone.

1 Like