Dynamic base color

[Sprocket02]

The base color of the Material You can be set or adjusted depending on the selected background image. Wouldn't it be cool to adopt this here in HA as well?

[Nerwyn]

Someone asked about this on the community forums but I forgot about it since an issue was never made here. The Android companion app does have an optional sensor for the accent color, in my case sensor.pixel_fold_accent_color. I could use card mod to detect this (or a helper sensor that points to this sensor and have instructions on how to create the helper and activate this sensor) and use it as the accent color, but I'd also have to include a way to calculate the primary color from that. This would also prove problematic when you have multiple users who want their own accent colors.

[Sprocket02]

Thanks for the feedback. Does it make sense to put a feature request in the companion app first?

[Nerwyn]

For iPhone maybe. For Android I think we have what we need to get started. I'll try to come back to this later this week.

[Nerwyn]

I've got some decent progress thus far in a new branch called material-you. I'm able to use card-mod to get a user defined sensor and use it as a color, and I implemented a hex to rgb to hsl calculation in jinja2.

Now I need to figure out how to calculate a good primary color from the user provided accent color. I think I can also add global vs user specific colors using user IDs.

[Nerwyn]

I've got accent and primary colors generating from a user provided hex color working and they replace the colors in the toolbar. But it doesn't seem like it's applying anywhere else. I need to figure out why and if it's possibly for these values to override the accent and primary colors globally.

[Nerwyn]

Good news: I got user definable colors working on the dashboards for any cards that use accent or primary color.

Bad news: It doesn't seem like card-mod themes apply to more info popups or the services and settings pages. This severely limits what I can make user configurable using card-mod and templates.

[Nerwyn]

Got it working in more info popups but not services, settings, or view configuration.

[Nerwyn]

@Sprocket02 I've created an alpha build that allows you to set the theme primary and accent colors using sensors. Instructions on how are in the branch README.

It doesn't change all of the UI colors since the Google Home app still uses static colors and doesn't work on all pages due to card-mod limitations, but it's a start.

[Sprocket02]

Very cool, thank you very much! I will test it immediately!

[Sprocket02]

Can you perhaps send me a code snippet to create the template sensor? To be honest, I haven't understood it.

This theme supports Material You color theming! Create a helper template sensor named Material Rounded Base Color that returns the hex code of your preferred base color...

[Nerwyn]

1. Navigate to Settings > Devices & services > Helpers.
2. Click + CREATE HELPER.
3. Click Template.
4. Click Template a sensor.
5. Name the sensor Material Rounded Base Color. If you want this color to only apply to your profile, add your name as it appears in the Home Assistant people page to the end.
6. Enter your Material You base color as a hex code. You can also use a template to read a hex code from somewhere else.
7. Click SUBMIT.

I've also updated the README with more detailed instructions on how to create the sensor template helper and enable accent color on the Android companion app.

[Nerwyn]

I'm also going to work on a more true to Material You version of this theme. As it is now, Material Rounded is based on the Google Home and Play apps, which use Material 3 shapes but not color styles. Here are some screenshots of some Google apps that do use Material You colors that I'm going to work off of.

As you can see Google isn't entirely consistent in how Material You colors are used in apps that support it so I won't feel too bad about taking my own creative liberties. I'm going to aim for the colors used in the photos and contacts apps.

[Sprocket02]

For the installation I only have to replace the material_rounded.yaml from the Alpha build, right? Somehow it still doesn't work properly for me. I can select the theme but I can't change any colors via the helper.

There is a typo in your description of how to create the helper. There you write that you should create a helper with the name Material Rounded Theme Color. But it must be called Material Rounded Base Color or?

[Nerwyn]

You should be installing it via HACS by opening the top right menu of this theme in HACS, clicking redownload, enabling show beta versions, and then selecting 2.0.0-alpha.001 from the dropdown. If you replace the file directly you also have to run the service frontend.reload_themes. And sorry! It should be Material Rounded Base Color I've fixed the README.

[Sprocket02]

Now it works. Super cool. Thanks a lot!

[Nerwyn]

I've created another version of the theme that changes almost all colors using a user given base color but it's not great. Calculating a good Material You color palette has proven difficult and card-mod in themes can't add styles to many parts of Home Assistant. I'm going to have shelve further work on this for a while because it's giving me a headache.

[Nerwyn]

I've done a huge refactor to make this theme easier to develop using separate reusable CSS style files and a pre-commit build pipeline and put out the first version 2 beta for Material You primary/accent colors and components. The Material You full color version of the theme will no longer appear but has been saved to a separate untouched base theme file for a future version 3. I hope to release version 2 soon and come back to the full color version 3 theme at a later time.

I've managed to get custom use colors to apply to more elements but still haven't gotten them to apply to everything due to limitations with card-mod. I've created this feature request for those elements.

[mousemat86]

looking forward to this version. I spent the last few days tweaking the theme with a wider colour selection, however I will stop now at await the release!

thanks for your work on this theme

[Nerwyn]

Can y'all give v2 beta 4 5 a try? I made all the card-mod CSS selectors as specific generic as possible to cut down on load times, removed a lot of redundant/unnecessary styles, and optimized some styles to use the most efficient selectors possible.

Edit: this beta breaks the toolbar on my fire tablet wallpanel so something about the changes I made breaks the theme on low end devices. Fixed in beta 5.

[mousemat86]

Hey Nerwyn I've been using the latest beta of the theme, it's looking great.

Not sure if you're seeing this but some URLs in HACs don't have great legibility, I've attached a grab here.

Also saw you're using a fire tablet. Is there an easy way reduce the action items to three dots, same as mobile? I use a fire tablet 8 and find all 3 action items too cluttered on the dashboard. Might not be possible with card mod?

[Nerwyn]

I've set linked-text-color to primary-color in the latest v2 beta, it should be more visible now.

Kebab menu (three vertical dots) vs three action items is determined by screen size, specifically at widths greater than 870px it shows three menu items, and at smaller widths it condenses them to the kebab menu. It looks like Home Assistant isn't simply hiding and showing elements with styles and media queries, but is rendering different elements at different resolutions. AFAIK there wouldn't be a way to display the kebab menu at higher resolutions.

I've personally retired most of my fire tablets in favor of this (I was the one who got the flash process working on Windows!).

[Nerwyn]

Officially released v2.0.0!

But! I still need to come back to create the full color theme for v3, which I'll do at a later time since v2 took so long. I'll leave this issue open until then.

[xvlw]

This looks great, i'm excited for the potential feature request and v3

I've converted from my custom theme over to this as of v2

Thanks for everything you do man!

[mcsdodo]

Any chance the base color sensor reading stopped working? I've installed from Hacs, I have a sensor but cannot see any changes.

[Nerwyn]

Still working for me and my Home Assistant server is up to date. What's the name and entity ID of your sensor?

[mcsdodo]

I have sensor.material_rounded_base_color as per documentation. Template {{ states('sensor.material_rounded_base_color') }} outputs #ff9800 yet dashboard looks like this

HACS FE components except material-rounded-theme:
secondaryinfo-entity-row
ha-tdv-bar
Mini Media Player
card-tools
Lovelace Text Input Row
Plotly Graph Card
Home Assistant Swipe Navigation
hacs_badge

[Nerwyn]

Do you have card-mod installed?

[mcsdodo]

Yes, thank you. That was it 🤦. I made a PR #20