That would require loading the font files either from a remote server or by saving the locally. This video gives a guide on how to do it.
That being said the default Home Assistant font is already Roboto, which is what Google normally uses. Product Sans is largely for Google branding.
Makes sense! I’ve actually uploaded the fonts locally, but I’m wondering if you have any guidance on how to refer to it specifically within the material rounded theme 
As for the type of font used, Google shifted to Product Sans for its apps about 6 years ago!
Here’s a screenshot from the Google Home app:
And here’s the same piece of text in Roboto:
You can see that the height of the “eye” (the empty semi-circle shape in the middle of the e) in the letter ‘e’ is shorter, and that the “fineal” (the curly part below the e that curves up to meet the bottom corner of the eye) comes much closer to the bottom of that flat part.
You can also see that the top of the eye of the letter ‘a’ curves downward slightly to form a teardrop shape, whereas in Roboto, that shape has a flat right and top inner edge.
Both of these fonts are the same weight, although the screenshots are slightly different sizes.
I’ll check that video out and see if it gets me any closer <3
Sure, here is the video:
That’s weird. I’m not sure why that would happen and can’t recreate it on any of my devices.
I thought maybe that I fucked up something in the yaml file of the theme while changing a color, but even after reinstalling it, it’s still the same. Could this be related to card-mod in any way?
And now also the background color is grey instead of white. Is there a way to completely remove every theme related file and just reinstall it from scratch? Or is it automatically removing everything, when deleted through HACS?
Edit: Funny enough, when I switch to “Material Rounded No Mod” the background is pure white. When I switch to the one with the mod, it is grey and the same color as the navbar
Google are updating the look of the Google Home app, annoyingly! Will you be updating your theme to match?
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.
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.
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?
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.
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.
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.
