Request - Vision OS Theme

[yigitgungor]

Vision OS Theme using transparency and shadows to create a 3d feeling theme with materials like glass or metal.

Inspiration:
https://dribbble.com/shots/21914237-File-Management-Application-VISION-OS-Style-Design
https://dribbble.com/shots/22185983-Smart-Home-for-Vision-OS
https://dribbble.com/shots/21951864-Smart-Home-App-Spatial-UI-Concept
https://dribbble.com/shots/21860045-Smart-Home-UI-Apple-Vision-Pro

[Nezz]

I quickly checked and these would get us pretty close:
https://github.com/SnippetsDevelop/snippetsdevelop.github.io/blob/509440d4d8c98c064244541a140499e74cf16c07/codes/vision-pro-ui.html#L54-L58

However, I don't think backdrop-filter can be set for cards from themes:
https://github.com/home-assistant/frontend/blob/dd082c204b45df55663dc257ee83f5efe1a9ab88/src/components/ha-card.ts#L13

[Nezz]

@basnijholt How reasonable would it be to add theming support in the frontend for backdrop-filter? Looks like a pretty simple change, but I'm not sure what the general policy is for changes that are only done for the sake of theming.

[basnijholt]

What do you mean with “theming support”?

[Nezz]

Introducing a variable for setting a card's backdrop-filter from a theme, similar to this one:
https://github.com/home-assistant/frontend/blob/dd082c204b45df55663dc257ee83f5efe1a9ab88/src/components/ha-dialog.ts#L78-L79

That variable can then be overridden by themes, making it possible to have blurred card backgrounds.

[yigitgungor]

Looks like something like this gives a nice blurred-transparent effect

-–ha-card-box-shadow: none;
--ha-card-background: rgba(50, 50, 50, 0.3);
backdrop-filter: blur(18px) saturate(180%);

[Nezz]

I added the required properties that enable blurred backgrounds:
home-assistant/frontend#20447

[basnijholt]

That looks great! Would definitely be a valuable improvement to these themes 😃