Use same variable for status bar color as frontend

[bgoncal]

Summary

We were using --app-header-background-color for status bar in the app and frontend uses --app-theme-color, this PR changes that to keep consistency with frontend

Screenshots

Link to pull request in Documentation repository

Documentation: home-assistant/companion.home-assistant#

Any other notes

[zacwest]

The purpose of this view is to extend the background of the top header so it looks seamless - like a navigation controller. Is the header background color always the theme color or is this going to introduce discrepancies that look bad? What does this look like in the default themes?

[bgoncal]

The purpose of this view is to extend the background of the top header so it looks seamless - like a navigation controller. Is the header background color always the theme color or is this going to introduce discrepancies that look bad? What does this look like in the default themes?

Indeed, but browsers also do this "trick" (#2752), but for browsers the frontend uses app-theme-color instead of the app-header, so it makes sense to align I guess. @bramkragten can you confirm this?

For the default themes it looks the same with or without this change

[Nezz]

Yes, it'd align this way. It does not make a difference for the default theme, but it does for ones that use transparency for app-header-background-color like my theme:
https://github.com/Nezz/homeassistant-visionos-theme

I believe @bgoncal uses a similar theme too since he implemented home-assistant/frontend#20473

[Nezz]

I wonder if we should fall back to this if the theme color is not set?

[bgoncal]

I checked with front end and app-theme-color will be always set, so no need to fallback

[jockebq]

Will this also resolve this issue?
home-assistant/frontend#18277

[Nezz]

No, that's a separate issue. I'll try to get it fixed.

[jockebq]

No, that's a separate issue. I'll try to get it fixed.

Great, really looking forward to it! What's the ETA from a fix like this to a release on iOS?

[bgoncal]

No, that's a separate issue. I'll try to get it fixed.

Great, really looking forward to it! What's the ETA from a fix like this to a release on iOS?

If it gets merged before the last week of the month it probably will be in the month's release, otherwise the month after. (Unless it is something critical)

[jockebq]

No, that's a separate issue. I'll try to get it fixed.

Great, really looking forward to it! What's the ETA from a fix like this to a release on iOS?

If it gets merged before the last week of the month it probably will be in the month's release, otherwise the month after. (Unless it is something critical)

Sounds great, if I join the Testflight beta, will things like this get released sooner in the beta?

[bgoncal]

Yes

[Nezz]

That issue/feature looks like a frontend change to me. You might not even need an app update.

[jockebq]

That issue/feature looks like a frontend change to me. You might not even need an app update.

Aha, ok, do I need a Home Assistant image beta version then? Or how do you mean this gets fixed?

[jockebq]

No, that's a separate issue. I'll try to get it fixed.

Great, really looking forward to it! What's the ETA from a fix like this to a release on iOS?

If it gets merged before the last week of the month it probably will be in the month's release, otherwise the month after. (Unless it is something critical)

Got the TestFlight update which pushed today, but the fix isn't there right? Because I still have the same issue as before?

Thank you!

[bgoncal]

No, that's a separate issue. I'll try to get it fixed.

Great, really looking forward to it! What's the ETA from a fix like this to a release on iOS?

If it gets merged before the last week of the month it probably will be in the month's release, otherwise the month after. (Unless it is something critical)

Got the TestFlight update which pushed today, but the fix isn't there right? Because I still have the same issue as before?

Thank you!

Nope, the PR got reverted because the front end font use "app-theme-color" with the same color as the top navigation bar all the times, so it looks weird in the app.
The goal is to extend the navigation bar color below the status bar, currently the only way possible is through --app-header-background-color

[jockebq]

No, that's a separate issue. I'll try to get it fixed.

Great, really looking forward to it! What's the ETA from a fix like this to a release on iOS?

If it gets merged before the last week of the month it probably will be in the month's release, otherwise the month after. (Unless it is something critical)

Got the TestFlight update which pushed today, but the fix isn't there right? Because I still have the same issue as before?
Thank you!

Nope, the PR got reverted because the front end font use "app-theme-color" with the same color as the top navigation bar all the times, so it looks weird in the app. The goal is to extend the navigation bar color below the status bar, currently the only way possible is through --app-header-background-color

Is --app-header-background-color something I can do myself or is this a fix you will work on?

[bgoncal]

@jockebq --app-header-background-color is a variable that you can set in your theme and customize the header background.

[jockebq]

@jockebq --app-header-background-color is a variable that you can set in your theme and customize the header background.

Ah, that I have already set. What I am talking about is this issue: home-assistant/frontend#18277
That on an iPhone 14 Pro looks very weird because the app itself does not begin on the top of the screen. So if you have a background set like in the picture it looks very bad.

[bgoncal]

Ok, I got it now, this PR was never meant to fix that, this was the original issue: #2752

[ncodee]

Wasn't this suppose to fix the issue?
I'm still seeing a solid background under the status bar, even with the new background option introduced in 2024.6.

[Nezz]

This was reverted in #2768:

I had to revert the PR, the app theme color doesn't always match the navigation bar, which makes it look weird in some situations like dark mode using the default themes

(see #2752)

The frontend was fixed to provide the correct color variables in Home Assistant 2024.6 (home-assistant/frontend#20758). I guess now the fix can be re-applied @bgoncal? I'm not sure how quickly people update.

[bgoncal]

@Nezz #2827