Modify dynamically the mobile browser's navigation bar color with jQuery

In this very sort tutorial we'll learn how to change the mobile browser's navigation bar color with jQuery.

Sometimes it's very useful to change the mobile browser's app bar color. For example, if your app has a feature to customize the theme, it would be very useful to change the browser's color as well. To do it, just follow the upcoming steps:

jQuery file

Add the jQuery js file into your HTML file, for example:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>

Meta tags

If you haven't done it yet, add the necessary META tags into your webpage. Extend it with a class called "bar_theme_color". Through this class, we can modify the color in runtime.

<meta name="theme-color" class="bar_theme_color" content="#fff" />

<meta name="msapplication-navbutton-color" class="bar_theme_color" content="#fff" />

<meta name="apple-mobile-web-app-status-bar-style" class="bar_theme_color" content="#fff" />

The script

Add the following lines into your webpage:

<script>

var modify = function(color) {
    $(".bar_theme_color").attr("content", color);

};
</script>

Invoke the function

Put the method invocation on an existing HTML component, or add a button like this:

<button onclick="modify('#fc0');">Test</button>

And we're done!