theme-color

HTML

<button id="red">RED</button>
<br>
<br>
<br>
<button id="blue">BLUE</button>

CSS

/* your custom CSS */
</style>


<!-- Chrome, Firefox OS, Opera and Vivaldi -->
<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">


<!-- access to the HEAD element -->
<style>

JavaScript

var redBtn = document.getElementById('red');
var blueBtn = document.getElementById('blue');


redBtn.addEventListener('click',function(){
changeThemeColor('red');
});


blueBtn.addEventListener('click',function(){
changeThemeColor('blue');
});


var chromeTheme = document.getElementsByName('theme-color')[0],
windowsPhoneTheme = document.getElementsByName('msapplication-navbutton-color')[0],
iosTheme = document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];

function changeThemeColor(color){
	chromeTheme.setAtrubute('content',color);
  windowsPhoneTheme.setAtrubute('content',color);
  iosTheme.setAtrubute('content',color);
}