Adaptive Mushroom

A minimalistic Mushroom-based dashboard for Home Assistant. No more need to maintain multiple dashboards! With this setup, you can create a single minimalistic-looking dashboard for both mobile/desktop and light/dark mode.

Adaptive Mushroom is heavily inspired by 7ahang's work on Behance, so be sure to check that out!

Installation

1. Installing dependencies

You will need to install the following frontend dependencies (using HACS or manually). Some are required for the adaptive layout to work properly, others are used only for specific cards in my personal dashboard. If you want to use some of my custom cards you will likely need button-card, for example.

Dependency	Required	Use-case
layout-card	yes	Determines the layout
mushroom	yes	For the basic cards
stack-in-card	yes	Combines several cards into one
card-mod	yes	Modifies card appearances
decluttering-card	yes	Re-use card templates to declutter lovelace config
button-card	no	For buttons below custom-made cards
mini-graph-card	no	For displaying a simple graph
apexcharts-card	no	For displaying advanced graphs and charts
bar-card	no	For displaying a bar
hourly-weather-card	no	For displaying weather forecasts as a bar
swipe-card	no	For swiping between cards
state-switch	no	For complex conditional cards
browser-mod	no	For displaying popus

2. Installing the theme

The theme defines the dashboard appearance and some variables necessary for light/dark mode. To make sure my theme is not overwritten by a Mushroom update, I put the file in a separate folder in the themes directory called Adaptive Mushroom, next to the Mushroom folder that is already there if you're using that theme.

1. Copy the themes/adaptive-mushroom folder to your Home Assistant themes directory.
2. Add the following lines to your configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes

3. Restart Home Assistant.
4. After restarting, go to your profile and select the Adaptive Mushroom theme from the drop-down menu.

You can also change your original Mushroom theme if you have it installed already, but I'm not sure if it remains untouched inbetween Mushroom updates. Don't forget to refresh your theme with the frontend.reload_themes service.

3. Configuring a new dashboard

Below steps were written for HA OS 2023.7, they might differ a little depending on your OS version. Adaptive Mushroom is compatible with 2024.2.

1. Create a new dashboard and visit it.
2. Click on the 3 dots in the top right corner and hit Edit dashboard, confirm that you'll take control and check the box to start with an empty dashboard.
3. Click the 3 dots again, Edit dashboard and then Raw configuration editor.
4. Remove the code that's there.
5. Open the lovelace.yaml file on Github and copy its decluttering templates, starting from the first line decluttering_templates: to views:.
6. Paste the code in the Raw configuration editor in Home Assistant.
7. Below this code you just pasted, add the following lines (pay attention to the # commented lines):

views:
  - theme: Adaptive Mushroom
    title: Home
    icon: mdi:home-assistant
    path: home
    visible:
      - user: 12345678901234567980  # In step 10 you will edit the view in the UI to change visibility
    type: custom:grid-layout
    layout:
      grid-template-columns: 0em 74px 30% 30% 30% auto
      grid-template-rows: grid-title-row-height auto auto auto
      grid-gap: 0.5em
      grid-template-areas: |  # You can define your own grid here later, but this one works as well
        ". . title title people ."
        ". nav left1 center1 right1 ."
        ". nav left2 center2 right2 ."
      mediaquery:
        '(max-width: 600px)':
          grid-template-columns: 3% 94% 3%
          grid-template-rows: auto
          grid-gap: 0em
          grid-template-areas: |  # You can define your own grid here later, but this one works as well
            ". title ."
            ". people ."
            ". left1 ."
            ". left2 ."
            ". center1 ."
            ". center2 ."
            ". right1 ."
            ". right2 ."
            "footer footer footer"
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mushroom-title-card
            title: ' '
          - type: custom:decluttering-card
            template: side-nav
            variables:
              - dashboard-name: dashboard-view  # Edit to your dashboard URL
              - active-view: home  # Edit to the active dashboard view name
        view_layout:
          grid-area: nav
          show:
            mediaquery: '(min-width: 600px)'
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: custom:decluttering-card
            template: bottom-nav
            variables:
              - dashboard-name: dashboard-view  # Edit to your dashboard URL
              - active-view: home  # Edit to the active dashboard view name
        # The sticky position doesn't work with Decluttering card, so you have to add the CSS here
        # If you don't use the UI you can use YAML anchors instead
        card_mod:
          style: |
            :host {
              z-index: 4;
              position: sticky !important;
              position: -webkit-sticky;
              bottom: 0;
            }
            ha-card {    
              background: rgb(var(--cstm-rgb-bottom-nav));
              box-shadow: none;
              padding-bottom: 15px;
              margin: 0px -4px -8px;
              border-radius: 0px;
            }
        view_layout:
          grid-area: footer
          show:
            mediaquery: '(max-width: 600px)'
      - type: custom:mod-card
        view_layout:
          grid-area: title
        card:
          type: custom:mushroom-title-card
          title: |-
            {% set time = now().hour %}
            {% if (time >= 18) %} 
              Good evening, {{user}}
            {% elif (time >= 12) %}
              Good afternoon, {{user}}
            {% elif (time >= 5) %}
              Good morning, {{user}}
            {% else %}
              Sleep well, {{user}}
            {% endif %}
          subtitle: Welcome to Adaptive Mushroom!
        card_mod:
          style:
            mushroom-title-card$: |
              h1 {
                --title-font-size: 26px;
                --title-font-weight: bold;
                --title-line-height: 1;
              }
              h2 {
                --title-font-size: 16px;
              }
              .header {
                --title-padding: 12px 12px 0px;
              }

8. Click on Save and then X. If you left in comments, they won't be saved, but that's ok.
9. You should now have a title and a navigation menu on the left of the screen for tablet/desktop and on the bottom of the screen for mobile. Please note that the bottom navigation footer needs more content to stay at the bottom of the page. If necessary, you can add a gap-card to 'simulate enough height' for the sticky footer to work.
10. Edit the view in the UI to change its visibility.

4. Configuring the other cards and views

Now it's time to start adding cards to your dashboard as you wish! I find it easiest to use vertical stacks to organize my layout. To place them in a specific grid-area of the layout, add the following code to a vertical stack (or any card):

type: vertical-stack
cards:
  - ...
view_layout:
  grid-area: YOUR_AREA_NAME_HERE

You can always reorganize the grid-area's in your layout by editing the content of the custom:grid-layout card that is at the base of the dashboard view.

The navigation menu will start working once you add more views. Remember to edit the decluttering templates of both navigation components (called side-nav and bottom-nav, editable through the Raw configuration editor) to suit your view names and icons.

Questions and comments

Feel free to comment or share your adaptive mushroom dashboard with me on the HA community forum.

ToDo's

• Add more screenshots
• Add links to dependencies
• Confirm installation steps are correct
• Add lovelace.yaml of other views
• Add automations.yaml

License

Copyright © 2023 SGA-Noud

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.