The status bar (something mistakingly called notification bar, safe area, or top bar) is the area at the top of a smartphone screen that displays information about the system, including the time, battery level and network signal.
As you'll see in this article, the status bar color can be set statically, updated dynamically, have a different value in dark mode, and even be made transparent.
How to change the color of your PWA status bar with Progressier?
If you're not using Progressier, read on. Else you have to do is go to Settings > My App > Icons & Colors in the Progressier dashboard, and choose a color for the Status bar color parameter.
How to modify the color of the status bar with code?
On both iOS and Android, the color of the status bar as well as some elements of the browser UI too are defined by the theme-color meta tag.
<meta name="theme-color" content="#4285f4" />
This meta tag is placed between the <head> and </head> tags in your app's HTML. It's important to note that you can dynamically update the meta tag's color to adjust the status bar color in real time, meaning it doesn't need to be a static value.
For example, the following code changes the status bar color every second:
setInterval(function(){
let colors = ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#8B00FF"];
let randomColor = colors[Math.floor(Math.random() * colors.length)];
document.querySelector("meta[name='theme-color']").setAttribute("content", randomColor);
}, 1000);
How to set different status bar colors in dark mode and light mode?
The theme-color meta tag can be used with a media query. For instance, the following code sets different status bar colors based on whether the device is in dark mode or light mode.
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
How to change the status bar appearance during the PWA splash screen phase?
Before your PWA has fully loaded, the system cannot detect the theme-color meta tag in your code. As a result, during the splash screen phase, the status bar color is determined by the theme_color parameter in the app manifest, which is a single static value set globally for your app.
Keep in mind that, in addition to the theme-color parameter in the app manifest, you may also want to set the background_color parameter. While the theme-color parameter defines the status bar color during the splash screen phase, the background_color parameter controls the color of the rest of the splash screen. So in most cases, you'll want to use the same value for both parameters.
How to make your iOS status bar transparent?
In order to make your iOS status bar transparent, you must add the apple-mobile-web-app-capable meta tag to your HTML to prompt the system to run your PWA fullscreen and overlay the status bar on top of your app.
<meta name="apple-mobile-web-app-capable" content="yes">
Next, you'll be able to adjust its color with apple-mobile-web-app-status-bar-style meta tag. This meta tag has three possible values: default, black and black-translucent.
default
This is the default value. The status bar comes with a white background and black symbols for the battery, time and network indicators.
<meta name="apple-mobile-web-app-status-bar-style" content="default">
black-translucent
With this option, the status bar is entirely transparent, and the info symbols are all white. This is a good option if the body of your app is dark.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
black
Possibly the least useful of the three options. The status bar background and info symbols are all black, making the entire status bar completely dark.
<meta name="apple-mobile-web-app-status-bar-style" content="black">