Modify the theme color of the mobile browser address bar and the mobile system status bar

When browsing websites with a mobile phone, how can the colors of the mobile phone's browser address bar and mobile phone status bar be consistent with the website theme? The following line of code is used to achieve the color matching of the website theme between the mobile phone address bar and the mobile phone status bar.

Recently, I noticed that many popular websites, such as BBC and Facebook, when you use a mobile browser to access these websites, the color of the mobile browser's address bar and the color of the mobile phone's system status bar have become the theme color of these websites, which makes the color combination of this display interface very beautiful. In this article, I will introduce how to modify the theme color of the mobile browser's address bar and the mobile phone's system status bar to match the color of your website.

Starting from Android 5.0 and Google Chrome version 39, the Chrome browser has added the function of using the theme-color meta tag to modify the theme color. What is this useful for?

With the advancement of HTML5, mobile web applications and adaptive web pages are getting closer and closer to the functions of mobile apps. This function of changing the theme color further makes web applications look like local apps.

It should be noted that only Google Chrome has this feature.Change the address bar color in Google Chrome.

The method is very simple. The theme-color meta tag can achieve the function. We only need toAdd a meta tag with name="theme-color" in the middle of the tag and set the content value to the color you specified, like the following line of code:

In addition, if you provide a high-resolution favicon, Google Chrome can give priority to this more beautiful icon. Google Chrome will choose the icon with the highest resolution. The official recommendation is to use a 192×192px PNG image, for example:

Theme-color only works in Google Chrome. If you want to modify the address bar presentation in iPhone Safari and Windows Phone IE, refer to the following code:

The color of the top status bar in Safari 15 is achieved by using the theme-color meta tag. Just add the following line of code to the head of your web page:

If your webpage supports dark mode and you want to set the top status color of the two modes to be different, you can add the following two lines of code: