1

I am currently curious to know how to change the background color of the status indicator bar and the search bar inside the browser on any mobile when visiting a certain page. I did a research but I didnt find a solution for this problem. I think this maybe possible using JavaScript, but there maybe a certain pseudo-class or event in CSS as well. Please provide me with your thoughts or solutions. Thank you in advance! Here is an example of this color change: https://translate.google.de/m/translate (Note the change from white to blue to fit into the google translator theme)

F9lke
  • 85
  • 1
  • 2
  • 8
  • Please, see [How to change the color of header bar and address bar in newest Android Chrome version on Lollipop?](https://stackoverflow.com/questions/26960703/how-to-change-the-color-of-header-bar-and-address-bar-in-newest-android-chrome-v). – Amin NAIRI Jul 23 '17 at 18:28
  • Thank you for that, how did I not find that? :^( – F9lke Jul 23 '17 at 18:30
  • The most difficult part of any any problem is good question ;-) – kris_IV Jul 23 '17 at 18:31

2 Answers2

2

You should use meta tags:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#333333">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#333333">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#333333">
kris_IV
  • 2,396
  • 21
  • 42
  • Thank you for the fast and clear answer! Why isn't there such a clear answer in the internet? – F9lke Jul 23 '17 at 18:28
0
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#cccccc">
<!-- Windows Phone (microsoft) -->
<meta name="msapplication-navbutton-color" content="#cccccc">
<!-- iOS Safari (apple) -->
<meta name="apple-mobile-web-app-status-bar-style" content="#cccccc">
Jesus Segnini
  • 355
  • 1
  • 8