Google are updating the look of the Google Home app, annoyingly! Will you be updating your theme to match?
1 Like
If any changes are made to colors then maybe. I may also have to update border radii. Any idea which APK version will have these updates?
Yeah looks like the colours on the main thermostat card on the second pic is slightly different (to make way for the two new buttons which are the old colour), and the border radius is slightly tighter.
Looks like the changes are rolling out already to Google Home Public Preview version 3.20.1.8.
I don’t believe the theme changes the color variables (like --blue-color) used in Home Assistant, but that could be a future improvement. Border radii seems to differ by card, so I’ll have to see which is more common and if I can make different cards use different radii.
1 Like
Another random one,
I’m trying to use GitHub - Skapershik/lovelace-animated-background: Animated backgrounds for lovelace to create dynamic backgrounds for a weather view, but the theme is putting a full background overlay over everything that blocks the animated background from being seen.
modes:
dark:
lovelace-background: rgb(19, 19, 20)
light:
lovelace-background: rgb(255, 255, 255)
I can comment these out, and that allows the background to be seen on the views/dashboard, but it also breaks other elements of the theme. Headers become invisible, and selecting date-ranges in the logbook becomes nearly impossible as the selection colour is replaced with transparency.
Any ideas?
It’s because the background color is also being forced to var(--lovelace-background) by the card-mod theme CSS here. This was done to fix an issue with background color inconsistently not appyling to view padding.
The animated-background project does have an option for changing the background style but it doesn’t work, likely because the creator of that fork is applying the background style before the user defined background is read. You could make a bug on that repo to fix it (they would just need to move their new line in this commit four lines down). Then you should just have to set background to transparent !important in the animated background config.
Alternatively, Home Assistant supports images as backgrounds (now through the view config UI). This includes animated GIFs and works with this theme.
1 Like
Hi! I have a question regarding the background change you made.
Do you force a color for the dashboard background through css?
Because when I try to change lovelace-background and primary-background-color to some ridicules color like light blue
rgb(227, 242, 253)
just to test it - the background of my dashboard stays the same.
Every other background changes in this example to light blue and when I refresh the cookies (strg + F5) the light blue background appears for a second on the dashboard and then gets overwritten by the greyish color.
I’m trying to customize your theme to my liking and a few releases ago I was able to change the background. Now when I update my customized yaml to your latest release I’m not able to change the background.
Is it possible to let us change the background again or am I doing something wrong?
I appreciate every help. 
The view background color gets set with CSS here in order to fix this bug. Where are you changing the background color? What if you try setting --view-background using whatever method you were using or the Home Assistant view background tab?
1 Like
Wow! Thank you!
Adding “view-background” for light and dark mode to my yaml file worked!
And to answer your question: I created a new empty yaml file inside my themes folder, copied the code of your material_rounded.yaml (just the first option, not the other “only dark” or “no css” modes) and changed the rgb values. For example this is my old yaml which is basicly your theme with some stuff added and changed. https://pastebin.com/raw/SUBa5nep
I do this so I can change a few colours, add some shades and so I don’t have to add the extra lines of code I need when you update the theme.
Again! Thank you very much for your help and for creating this awesome theme.
1 Like
I absolutely love this theme! Only strange behavior I have found is that the view tabs load at the footer when I connect to HA on my local network, but when I connect to HA from a remote connection (using NABU Casa), the view tabs remain at the header. Is there something that I have done incorrectly?
Ok this seems to have been related to the Material Symbols version I was using. I was still on version 1.0.0 and after upgrading it to the latest version, it seems to have resolved the problem.
One of my other projects - Custom Features for Home Assistant cards. It should get added to HACS really soon but can be added as a custom repository for now.
3 Likes
Version 3 is in beta and it implements actual Material You color theming via the official Material Color Utilities library. This is a breaking change and requires the installation of a JavaScript module resource which handles the generation and application of user color themes. It also includes an entirely new version of the theme that uses all of the Material You colors to generate a full color theme, that seamlessly matches Material Design 3 apps and websites. I could use feedback before I officially release it!
Version 3 is here!
This theme now has true fully featured Material You color theme generation and usage. Use the new theme Material You and Home Assistant will match modern Material Design 3 apps in both color theming and component design. You still have access to Material Rounded if you like the more static Google Home inspired colors.
BREAKING CHANGE Color theme generation is now handled by a separate JavaScript module which has to be added as a resource to Home Assistant (instructions here). This module uses the official Material Color Utilities package to generate accurate Material Design 3 color schemes.
1 Like
I’m trying these themes, they’re really wonderful, but the behavior of my HA instance is pitiful, it doesn’t respond to touch input, it crashes easily and freezes completely in the app, on any device or web version.
Maybe I need to do something else?, but I don’t know what and I don’t understand this behavior I’m experiencing.
With the default theme I don’t have any problems.
It’s likely an issue with card-mod. Is your version of card-mod up to date? Does the no mod versions of the theme also cause any issues? You should also share any browser dev tools console error logs (CTRL SHIFT I will open browser dev tools).
My apologies, I hadn’t read the need for the .js file and the other preferences. I was a bit frustrated by the problems the theme created in the interface.
I just did those requirements and at least the web version doesn’t get stuck now, I will continue testing on the other devices. And I will surely venture with some more customization that your theme allows, THANKS!
The JS module has no effect on performance if it isn’t there? Without it the themes use default blue colors.
Well, apparently I just added the .js file and everything works better. I only have problems now when browsing with Fully Kiosk, but the official HA app works fine. It is complicated to switch to the development tools console when using an app on the tablet.