I am supposed be putting the site properly live today, sendingnout emails and getting people install the pwa 
I understand your frustration, but that’s not a very helpful answer.
All I can say at the moment, is that it looks like that something is modifying the normal behaviour.
Can you check which plugins, or theme components you have installed? Have you added any other customisation?
Edit: nevermind me, missed some earlier info
Its not just my site. Its any discourse site???
I have already explained why this is the case on Discourse but not on other sites.
Since you are a customer, we can already see which site you are associated with. The colors of the buttons are exactly the same as in the screenshot I shared earlier. They are not as light in color as yours.
Its the same on the default theme with no customisation or components
1 like
The issue with the buttons appearing very light on the white bottom bar is specific to your device/OS. On other devices I’ve tested, the bottom bar is indeed white when the OS is in light mode, but the buttons are gray and remain visible. So the behavior you’re seeing is not typical and doesn’t affect other users.
S ultra 22
Huawei mate20 pro
That said, we understand the experience isn’t ideal when using the PWA with a dark Discourse theme while the Android OS is in light mode. As I said, we will open an internal discussion with our devs and designers to explore how we could improve this scenario in future updates.
1 like
Well this is weird and contradicts what you have said. Its like hit or miss haha.
This is a samsung s24 in light mode
This is a google pixel in light mode
One iphone didnt load the bar at all similar to above @chapoi issue had.
One older samsung s22 loaded with white bottom bar and darker icons correctly. I have another 10 people doing a test later and will update more.
1 like
I think Chrome browser can handle it in some cases, depending on the Android version, device etc…
In a PWA, the <meta name="theme-color"> reliably changes the top address bar color in Chrome on Android. The theme_color in manifest.json affects the status bar and sometimes other UI parts, but behavior varies by device, browser and Android version.
The native bottom navigation bar usually cannot be controlled from a web app. Some browsers may apply the theme color, but it’s not guaranteed.
This is one of the reasons I converted my site into a TWA, using Bubblewrap, which can also handle bottom navigation bar colors.
So with a PWA, you can style the top bar, but bottom navigation bar control is inconsistent.
iPhone won’t load this navigation bar because this is a native element in the Android OS.
2 likes
Its just weird ive never encountered this issue before. Have used the wordpress super pwa on 9 sites and never had an issue. Just the discourse one. As you state you encountered the same problem of inconsistincy hopefully they can make the bottom bar style the same as the top as that works as expected on every device we have tested.
@dax @chapoi even more bizarre. If i install the pwa on my phone through firefox it works perfectly. At least i can see the bottom buttons now.
This is in light mode
1 like
The reason it works on firefox but not chrome comes down to how each browser handles PWAs on Android is because chrome only looks at the theme_color in the Web App Manifest to color the system bar. If the manifest isn’t served from the site’s root domain or doesn’t have the right color, Chrome just falls back to white. Firefox is more flexible and will take the colors from the page itself, so the bar looks correct even without a custom manifest.
So moving forward, i have a hosted discourse site that is a dark pallette , we have all other palettes disabled so users cant choose, which is jnline with our brand. We have one theme enabled which users cant change.
How can we make the bottom bar #121212 in the Pwa on chrome as having an installable app is important to us?
The dark site and a light bottom bar is so disctacting and looks horrible.
As I said before, I’ve opened an internal discussion to explore possible improvements for this scenario. However, with the Discourse global meetup coming up shortly, the team will not be able to make any changes in the immediate term, and unfortunately there is no workaround that can guarantee the bottom bar will always appear dark at this time.