Chrome Mobile color bar theme-color meta tag not working

Question

I'm trying to implement the theme-color meta tag but I can't see it working in my Motorola smartphone with Chrome and Android Lollipop.

I started with a theme-color tag then I wrote the other tags, but have had no success at all.

<meta name="theme-color" content="#5f5eaa"> <meta name="msapplication-TileColor" content="#5f5eaa"> <meta name="msapplication-navbutton-color" content="#5f5eaa"> <meta name="apple-mobile-web-app-status-bar-style" content="#5f5eaa"> 

This webpage is running over HTTPS with an invalid certificate (it's an intranet tool), but I don't think it would affect that feature, right?

Answer 1

In my case, it actually turned out to be the theme my phone was using. The theme-color meta tag does not work in Android's dark theme (I'm on Android 10 at the time I'm writing this). Switch to the light theme in Chrome and you'll see it work. :)

Answer 2

A valid certification is required from my testing experience.

I had the same problem as I was testing on my localhost (i.e. the address bar background color did not change on mobile), but as soon I pushed to production (i.e. production has valid certification) I was able to view the changes reflected on the android testing devices.

Android devices used: OnePlus 3T, Huawei, an old samsung phone. All were positive results.