How to change the Android navigation bar color in a PWA?

Viewed 4621

I would like to change the color of the Android navigation bar on the web when I add the page on the Android home screen (Progessive Web App) but when I open the PWA, the color of the Android navigation bar is black and I want Change the color to white. In the manifest, you can change the color of the theme and I do, but still follow the color black.

Is it possible to do that?

I mean the Android navigation bar, not the notification bar.

Android navigation bar

4 Answers

You can add a meta tag to your HTML page.

<meta name="theme-color" content="#225577"/>

As far as I know it is currently not a PWA supported feature.

You can play with manifest.json and set "theme_color":"#000000", "background_color": "#000000" - your browser might pick those colors and apply them to the nav bar (or might not, Samsung's standard browser used to ignore this setting and never changed nav bar color). It seems there's still no such feature in PWA (which existis in Android native apps) that allows specifing navbar color alone.

The color of the navigation bar doesn't work with dark theme. Change to light theme and it will work.

Related