How to change the color of header bar and address bar in newest Chrome version on Lollipop?
Solution 1:
Found the solution after some searching.
You need to add a <meta>
tag in your <head>
containing name="theme-color"
, with your HEX code as the content value. For example:
<meta name="theme-color" content="#999999" />
Update:
If the android device has native dark-mode
enabled, then this meta
tag is ignored.
Chrome for Android does not use the color on devices with native
dark-mode
enabled.
source: https://caniuse.com/#search=theme-color
Solution 2:
You actually need 3 meta
tags to support Android, iPhone and Windows Phone
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">