Material You Theme - A Fully Featured Implementation of Material Design 3 for Home Assistant

I already cleaned my cache (countless times now) + tried other browsers and have the theme fully updated. Nothing is working. I even uninstalled the theme and instaled it again.

Is there an easy way to apply the Material You theme to all bubble cards? Pretty much all non-bubble cards have the nice drop shadow/theming, but all bubble cards are flat.

This was it for me. Everything was good to go after this.

After the updates to core etc the bottom menu doesn’t show in the app unless I redownload a hacs add-on and reload the interface if I close the app and open it again the bottom bar is gone again it fine in a web browser

Hello.

I have the same problem. Cleared the cache, re-installed the theme and utilities and tried numerous times to add the custom css.

Sadly I can’t get the custom css to work in the dashboard.

It works for the menus and during the process of creating a new card. But then - in the dash itself - the new card is shown in elevated design.





@fangoward @stephen3 I’ve created a discussion thread to centralize troubleshooting instructions and discussion, as a lot of users are running into stuck cache issues which prevent the latest version of the module from loading with the 2025.5.0 fix.

@vladimirdarak @Bonzenpaule. This is probably a caching issue. You may have to clear cache and hard reload in order for the frontend to load the updated CSS resource. FYI the custom CSS resources are a Home Assistant feature, not a theme one. Although the --md-sys CSS tokens are generally from this theme.

Thanks for your reply and help!

I thought so too, so I cleared the cache in the HA App (under troubleshoot). Then closed it, went to the android settings, force stopped the app, cleared the cache and then started it again.
That and a login through incognito browser didn’t work either.

Edit: I even deleted all app data. Still no Joy :⁠-⁠|

I have no clue what’s wrong. Maybe something from the theme or tool is overwriting the css?

@Nerwyn I tried clear cache, hard reload several times but nothing helps. I made copy of theme, rename it to Material You Custom and change one line in material_you_custom.yaml. Then I changed view theme to Material You Custom and everything works but this solution is too complicated due to one line change.

@vladimirdarak

What line did you change to what? :smiling_face:

@Bonzenpaule this one from:

ha-card-box-shadow: var(--md-sys-elevation-level1)

to

ha-card-box-shadow: var(--md-sys-elevation-level0)
1 Like

The CSS resources (as I’ve written them) apply to the body tag, which will not be overwritten by the theme or module.

If you open browser developer tools and look at the page CSS, you should see something like this for the body tag.

image

The file should also appear in the sources tab.

Themes and the module apply styles to the html tag. Because the body tag is a child of html, anything that descends from it (which is everything except for head) will use these CSS custom attributes instead of the theme or module ones.

Again, thank you!

I’ve looked at the source and can see the css file.

But when I looked for the file in the code I’ve only found it “outside” the body element. And when I was looking for “–ha-card-background” to see if it get changed somewhere I just found the standard elements for “filled, elevated” etc. But I couldn’t find the code from the custom css file.

Is there something wrong with my setup then? I’ve got some errorcodes & warnings.

Or is it something the homeassistant developers have to fix?

All those other errors are unrelated and for other frontend resources that probably have dead links. It would be good to clean them up but it wouldn’t affect this. If you inspect a ha-card with browser developer tools (CTRL + SHIFT C and then click on a card to pull it up in HTML) and click on the hyperlinked background: var(--ha-card-background); in the styles tab, where does it lead? It should lead to the body styles, but if it’s leading to the html style then something weird/buggy is happening. My guess is that there may be something in between that’s overwriting styles.

Edit: Actually wait. Look at the line above the one you have highlighted in that second screenshot. That’s the stylesheet but it’s loading from your external URL service - Nabu Casa. If you click that href link does it open the CSS file? Are the styles all commented out in it? My guess is that this is a caching issue with Nabu Casa. Does anyone know how to clear Nabu Casa cache? I need to add it to the cache troubleshooting discussions thread.

@Nerwyn I think this will never works due to Shadow DOM

Incorrect. CSS custom properties are not blocked by and inherited through shadow DOM. It’s how Home Assistant theming works.

I have correctly loaded CSS file:

all-cards2.css?v=11
body {
    --ha-card-box-shadow: none;
}

and style is there but cards still have box-shadow.

Sorry, as new user I can’t add screenshots directly

It’s leading to the body styles - so nothing weird is happening.

Yeah I’m on vacation so I have to connect through nabucasa. If I click the link the css file is opening. I guess thats as it should be. There are just a lot of spaces. Don’t know if thats a problem?

I will try again when I’m back home (there are no more rainy days forecast so I’ve got no time left to tinker :wink: ). It’s probably related to nabucasa and caching. Just as you said.

And then I will clean up the other issues. :slight_smile:

The CSS looks correct. It’s weird that the styles are applying but somehow being ignored. Could it be that the theme styles are being reapplied downstream? What type of view are you using? I’ve seen issues with default Home Assistant theme styles overwriting the user set theme in some scenarios.

Maybe you can try to add ?v=2 into the resource file like:

/local/custom-styles.css?v=2