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!
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 |
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.
- Copy the
themes/adaptive-mushroomfolder to your Home Assistantthemesdirectory. - Add the following lines to your
configuration.yaml:
frontend:
themes: !include_dir_merge_named themes- Restart Home Assistant.
- After restarting, go to your profile and select the
Adaptive Mushroomtheme 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.
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.
- Create a new dashboard and visit it.
- 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. - Click the 3 dots again,
Edit dashboardand thenRaw configuration editor. - Remove the code that's there.
- Open the
lovelace.yamlfile on Github and copy its decluttering templates, starting from the first linedecluttering_templates:toviews:. - Paste the code in the
Raw configuration editorin Home Assistant. - 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;
}- Click on
Saveand thenX. If you left in comments, they won't be saved, but that's ok. - 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.
- Edit the view in the UI to change its visibility.
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_HEREYou 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.
Feel free to comment or share your adaptive mushroom dashboard with me on the HA community forum.
- Add more screenshots
- Add links to dependencies
- Confirm installation steps are correct
- Add lovelace.yaml of other views
- Add automations.yaml
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.