'Chrome Mobile color bar theme-color meta tag not working

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?

htmlgoogle-chrome


Solution 1:[1]

Always check actual browsers versions.

Here is table of supporting this meta tag. https://caniuse.com/#feat=meta-theme-color

enter image description here

Solution 2:[2]

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. :)

Solution 3:[3]

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.

Solution 4:[4]

Please check your browser theme? May be there enabled the dark mode!

Solution 5:[5]

chrome requires you to have a valid certificate for the theme-bar color to work

Solution 6:[6]

Just tested this, following @Lodmot's answer for Android 11. There is a slight (but important mention) to make:

Do NOT rely on the "System default" setting! In Battery Saver mode, the theme is forced to "Dark", so your theme-color will have no effect.

To properly test out your code, manually set Chrome's theme to "Light".

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Lodmot
Solution 3 M.Gomaa
Solution 4 Takhir Atamuratov
Solution 5 kriskotoo BG
Solution 6 Mihai-Cristian

Related Questions