I’m a huge fan of Google’s Material You design principles and how it looks on Android, so I decided to recreate it in Home Assistant.
This theme is now on HACS! Search for it under frontend repositories.
There are two base themes - Material You and Material Rounded.
Material You
The newer version of the theme that features complete color theming via an optional JavaScript module that can be added as a resource and component redesigns to match the Material Design 3 specification using card-mod.
The original version of the theme that aims to match the styling of the Google Home app as closely as possible. It features some basic color theming and the same component redesigns.
This theme uses card-mod to redesign several components as described in the README, including turning the view tabs into a separate footer and updating it and other components to match material 3 design specifications. If you have card-mod installed and do not want these changes to apply, use the “No Mod” version of this theme.
Material Design 3 color theming requires a JavaScript module resource which can be added to your Home Assistant instance as described in the README.
While creating this theme I did find that the CSS for some of the tile cards (notably fan and alarm control panel) are a bit weird and not custom theme friendly. While most tile features add transparency affects to disabled-color, some tiles share their “off” background color with the icon which makes hard to separately theme the two without using card-mod at the card level. It would be nice if all tile features used the transparent disabled-color method for their backgrounds so they could be better themed.
This is some great work! I am creating a dashboard using your theme as we speak.
A bit of a self promotion, but I have done some work getting the latest Material Design Symbols for M3/M You if you need some even closer resemblance to the Google Home app?
I have been working on some of the grouped category types for this.
I am going to set the labels to identify device types and count accordingly, but currently this is only holding text. The colours too, are holding values, as I think that the theme could be updated to manage this better via some clever use of variables. Same with the entities, these are just there to get the button to appear. As you can tell a bit of WIP!
Just as I was starting to look for inspiration for a complete re-write of my dashboard, I see this! This is exactly the sort of thing I’ve been wanting for some time, something to replace the aesthetic of Google Home.
I’m wondering if it’s at all possible, or planned, to use the Accent Colour sensor which is available on the Home Assistant companion app to influence the overall colours of the theme?
I’m a total noob when it comes to this sort of thing, so forgive my ignorance if this isn’t possible! Just thought it would be quite cool if the accent colour could be picked up from the android device that is connected to the dashboard at that time (per user, one for me, one for my husband?)
That’s a good find! While I don’t think it is possible to use entity sensors by default, I wonder if I can using card-mod jinja templates. I do see the accent color template in the Android companion app settings and it’s returning hex color at sensor.pixel_fold_accent_color after enabling it. I’d also like to look into letting the user manually set the primary and accent colors like can be done in the default Home Assistant theme.
Yeah, it wouldn’t be able to be done by default upon install for obvious reasons, but I could definitely see you adding some instructions to the readme to set that sort of thing up manually.
I would expect it to change the tint of the background and buttons etc, without affecting the colour of sliders if the setting is enabled to inherit the colour of the lights for example. Basically, i’d like for it to work like Material You does on android!
i really like this Theme, but im not very good with theming myself.
Is there a way to use the big slider card as button cards as well? Or theming a button card to fit the material design?
Big slider card currently only works with light entities, but I’ve gotten it to behave with lights that don’t have brightness control (like wall switches changed to entity type light) using the following config:
You may also want to look at this thread on Reddit. Someone posted their dashboard and has some great looking Google Home style cards in it, and they posted their button configs in the comments along with a link to another community forum thread.
@ZOXSOCKSSomeone else made a feature request about using Material You colors for this theme and I’ve gotten around to implementing an alpha build (2.0.0-alpha.001 at time of writing). It works on the dashboard but not config pages due to card-mod limitations, but will allow you to set your own base color from which accent and primary colors are computed. You can have your base color sensor point to the Android accent color sensor. There’s more details and instructions in that thread and the README for the material-you branch of this theme on GitHub.
Here’s some samples of what it looks like if I use the orange from your profile pic as the base color!
Loving the theme version 1.6 so far. Just had to change the background to RGB 19 19 20 to get proper contrast and a matching Android status bar.
Also posted a bugreport on Github, since the navigation bar on the bottom compresses once navigate to another lovelace page via a button has been used. I need to refresh the browser to make sure it looks correct then.
But do you know if there’s a way to force border radius to 28px instead of 12?
Right now I have to use card mod on every single big-slider-card to get the right border-radius.
With this theme border radius should already be set to 28px. If it isn’t when this theme is enabled something may be wrong with your browser cache that is preventing the theme from fully applying.
Will send you a small donation soon, just figured you do all kinds of cool stuff on Github. Thanks for the great work.
Also saw that I had a manual border-radius added to my slider cards. Removed the lines on every card and now works as intended.
Just still having trouble if I open a hidden page (subview) on my dashboard and the bar at the bottom most likely shrinks in half after coming back. Didn’t find any solution yet.
