Apply Material You/3 theming colors to default frontend theme

[jpelgrom]

trafficstars

Is your feature request related to a problem? Please describe.

Android 12 introduced Material You/3 which has dynamic colors. The default Home Assistant theme allows the user to set the primary color and accent color on their profile page (which is only saved on the specific device). Should the app implement an option to override these colors to follow the device's colors automatically, like system apps and other apps that use the latest Material theming?

Describe the solution you'd like

An option that the user can enable so that if the default theme is used, the options for primary color and accent color are automatically updated to the primary and secondary color calculated by the system.

Proof of concept here, although it still won't make the frontend look like a Material You app because the theme is very much based on the previous/current Material Design Components/2 style.

Describe alternatives you've considered, if any

I can think of some alternatives, but they all require significantly more manual action:

• Take a screenshot to find out which colors the system has generated and enter them manually. Must be repeated every time the colors change (also when switching between light/dark theme).
• If #2085 is implemented, maybe create a custom theme and (automatically) update it whenever the sensor values change.
• Wait for Google to expose the colors as a CSS variable and create a custom theme that uses these variables (I'm assuming they'll want to support Material You theming on the web in the future).

Additional context

Opening this as a feature request to 1) see if anyone else is interested and 2) get input on whether this is something the app should implement at all. I think that as more devices are updated more people might want this as Home Assistant starts to look out of place on the device, but at the same time the result isn't fully Material You because of the frontend theme, implementing it is a bit of a hack and usually the app doesn't mess with frontend appearance.

[balloob]

I would love to see full Material You support that is automatically enabled with the default theme. To turn it off, people could change the theme in their profile.

We're switching to Material 3 slowly in the UI, so expect it to better "fit" over time.

[jpelgrom]

I would love to see full Material You support that is automatically enabled with the default theme.

'Official' support is even better than the proposed hack where the color options are updated when using the default theme.

To turn it off, people could change the theme in their profile.

I think this will require some changes in the frontend though, like creating a "Material You default" theme when using the app to allow turning it off by changing (back) to the current default theme, and perhaps also better/more granular color settings.

[Inglan]

There's a theme with material 3 https://github.com/Nerwyn/material-rounded-theme