Color status bar according to hass theme

[tmechen]

Android Status Bar color is defaulting to the colorPrimaryDark of the app theme. Looks like this is "hassio blue" which makes it ugly (see image).

• Set android "colorPrimaryDark" to the corresponding color in the hassio theme (i think the top bar in hassio is colored by hassio theme "text-color"?

[fernandex00]

I have that problem too

[balloob]

So an initial implementation could look at the HTML source and extract the theme from the <meta name='theme-color'> tag. We could use this JS:

document.querySelector('meta[name=theme-color]').content

This would be a good first approach. This won't work when a user changes the theme though. If we want to add support for that, we should first update the frontend first to notify the app via the external bus https://developers.home-assistant.io/docs/en/frontend_external_bus.html

[balloob]

Opened an issue at the frontend to track reporting the primary color via the external bus. home-assistant/frontend#4220

[balloob]

When implemented in the app, we should cache the primary color value, and update it whenever the frontend gives us a new value.

[balloob]

One quick fix here is to use theme_color which is returned from get_config webhook.

[balloob]

It's not perfect but probably hits 90% use cases.

[dshokouhi]

Just tested build 80 and I force closed the app and reopened and it did not update the status bar. I tried to clear data in the app and log back in, change the theme and then force close the app but it still did not update. Is there a specific theme variable that needs to be set that I am missing?

[JBassett]

I noticed when I got to my production instance too, already fixed: #270

[dshokouhi]

@JBassett latest build (81) does not seem to be working when I force close the app and re-open, are you seeing the same thing?

[JBassett]

@dshokouhi Yep, the device I test with (Nexus 6) it works great.... but it's a couple versions behind, My Pixel 2 doesn't work. I normally don't test on it because I would need to uninstall the firebase version. I'm going to do 2 things, make it so a debug build can be installed beside a "production" build and fix the themeing on newer devices.

[fernandex00]

Hi, is there some progress on this?

[JBassett]

After digging in we are doing what we can for now, another story has been opened to set theme of current app instead of overall theme: #272

However if you call the frontend.set_theme service and close and reopen the app the status bar will match.