CODEWITHSUNDEEP
javascriptandroidjquerycssbrowser
F9lke
F9lke

Reputation: 95

Change color of the status indicator bar of mobile

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)

Upvotes: 2

Views: 4181

Answers (2)

Jesus Segnini
Jesus Segnini

Reputation: 355

<!-- 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">

Upvotes: 0

kris_IV
kris_IV

Reputation: 2444

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">

Upvotes: 3

Related Questions