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.
Version 3.1.0 has been released!
The view title is also now present in the top app bar, similar to how it’s present on subviews and single view dashboards.
View and sidebar options now have state layers, and visual indicators will appear when you hover over or press them.
I’m looking to add some gentle colour tints to certain UI elements to help differentiate them on my dashboard. Is there anything in the (hundreds!) of generated colours that come out of the dynamic colour engine that’s a good pick for this? Or should I just choose some strong colours and apply them with a low alpha and hope for the best? (My CSS skills are barely better than a rock, I do a lot of “hoping for the best” 
)
The theme files have all of the palette colors in a default list, even if they aren’t used. There aren’t hundreds of colors, but there are about 100 between the light and dark palettes. You can reference them like so:
ha-card {
background: var(--md-sys-color-tertiary-container);
}
Hi! I have been using the last version 3.1.0, but i can’t get to display the top bar as the Google home App (so the top right circle with the profile icon).
Anyone that can point me what i should to or look at?
So far everything else works great 
The profile picture in the top app bar isn’t part of the theme, you may be confusing the two sides of the compared to Google Home screenshots.
This release has huge breaking changes - the first being that it no longer uses card-mod to apply styles. Instead all Home Assistant component modification has been moved to the companion module, which now has its own repository and can be installed as a custom repository in HACS.
The style injections are now performed by “monkey patching” the lifecycle methods of the Home Assistant components to add styles when they’re first rendered. This method not only works everywhere in Home Assistant, but it’s much more efficient and fixes the performance issues some users were having with card-mod theming. Many more components have received Material Design 3 upgrades.
In addition to base colors for color theme generation, you can now choose between nine different color schemes! You can also change the contrast level of the theme.
The companion module now has a configuration panel! You can use this panel (accessible from the sidebar when installed correctly) to set custom base colors, schemes, and contrast levels for you and your users. Once setup, non-admin users can easily set their own color schemes as well. Note that the old sensor domain entities have been obsoleted in favor of input domain entities which can more easily be set using the UI.
Hi Nerwyn, this new release is amazing and solves a ton of problems for me! Thank you!
I’m curious if it’s possible to manually change the style of sliders. I have a few different types of sliders here (mushroom, tile, and entity card) and I can’t seem to get the right-most slider to appear with the dots/gradations as appears in the contrast settings of your own plugin (Pictured at the bottom)
Is there any way to enable this manually? Thanks!
Glad it’s working well for you!
The slider tick marks not being present in the entity row slider are a Home Assistant design decision, one that I can’t easily get around. The slider has a property called ticks, which when set to true renders the tick marks. This can be set with JavaScript but I don’t see a good way to implement that in your frontend.
Huge shame! I figured it’d be something like that. Thanks again for looking into it and putting so much effort into this amazing theme!
Hello Nerwyn,
i have made the Installation of the Material you Utilities, but when i want to start it i get this error message on my iPhone. What do i wrong?
90% of time when people report an issue like this it’s a caching issue. Does this issue occur if you connect to Home Assistant locally through it’s IP address or http://homeassistant.local:8123? Is it possible to clear cache via Nabu Casa? I use Cloudflare and some users had caching issues using it as well.
Okay, but do you have a solution for this problem?
Great mod. Really enjoy it, thank you very very much. Unfortunately since last update my widget looks like this. Is it supposed to look like this?
The shadows weren’t there before and It looked more like one card.
Clear app and browser cache. Make sure the URL you added to configuration.yaml is correct. See if the issue also happens on a desktop browser.
Yup. The MD3 spec has a box shadow on cards, which was missing from previous versions of this theme. The theme README has instructions on how to use alternate card variants using frontend resource stylesheets.
