How to Change the Status Bar Color on iOS using a WKWebView – A Step-by-Step Guide

When building a web-based app for iOS, it’s common to use a WKWebView to display web content. However, the default WKWebView appearance doesn’t always match the design of your app. One aspect that can be customized is the color of the status bar, which is the bar at the top of the screen that displays the time, battery level, and other information.

In this blog post, we’ll walk through the process of changing the color of the status bar in an iOS app that uses a WKWebView.

1. First, open your app’s info.plist file and add a new key-value pair. The key should be “View controller-based status bar appearance” and the value should be “NO”. This tells iOS that you want to control the status bar appearance in your app, rather than relying on the default settings.
2. Next, open the ViewController class that contains your WKWebView. Import UIKit at the top of the file:

import UIKit

3. Add the following line of code to the viewDidLoad() method:

UIApplication.shared.statusBarView?.backgroundColor = UIColor.red

This sets the background color of the status bar to red. You can replace UIColor.red with any other UIColor to change the color of the status bar.

4. Build and run your app, and you should see the status bar change to the color you specified.

And that’s all there is to it! With just a few lines of code, you can customize the appearance of the status bar in your iOS app. Keep in mind that this method works with WKWebView, but also with other views.

Note: In iOS 13, Apple introduced a new way of managing status bar, you can use this method :

if #available(iOS 13.0, *) { let app = UIApplication.shared let statusBarHeight: CGFloat= app.statusBarFrame.size.height let statusbarView = UIView() statusbarView.backgroundColor = UIColor.red view.addSubview(statusbarView) statusbarView.translatesAutoresizingMaskIntoConstraints = falsestatusbarView.heightAnchor .constraint(equalToConstant: statusBarHeight).isActive = truestatusbarView.widthAnchor .constraint(equalTo: view.widthAnchor, multiplier: 1.0).isActive = true statusbarView.topAnchor .constraint(equalTo: view.topAnchor).isActive = true statusbarView.centerXAnchor .constraint(equalTo: view.centerXAnchor).isActive = true }

Changing the status bar color using a webview is a good way to make your iOS app stand out and match the design of your web content. With this simple technique, you can easily customize the appearance of your app to create a more polished and professional look.

If you’re looking for an even easier way to change the color of the status bar in your iOS app, consider using an app template like WebViewGold. This app template contains a built-in “Dynamic Status Bar API” that makes it easy to customize the appearance of the status bar to match the design of your app.

With WebViewGold, you don’t need to write any code or make any changes to your app’s Info.plist file. Instead, you can simply use the built-in API to change the color of the status bar directly from your web content.

Customizing the Status Bar on iOS using JavaScript using WebViewGold for iOS:

With WebViewGold, you can easily change the color of the status bar to match the design of your app. The color input should be in the RGB format, with values ranging from 0 (min) to 255 (max) for red, green and blue. Use the following JavaScript code to change the color of the status bar:

window.location.href = "statusbarcolor://255,0,0";

When the color of the status bar is changed, the text color will automatically adjust to either white or black, depending on the darkness of the color. Additionally, other UI features such as Pull To Refresh and the Bottom Bar will also adjust their colors accordingly.

Manually Setting the Status Bar Text Color:

If you would like to manually choose the color of the status bar text, you can do so using this option. The text input options are “white” or “black”. Use the following JavaScript code to change the color of the status bar text:

window.location.href = "statusbartextcolor://white"; // Example: black text window.location.href = "statusbartextcolor://black";

In conclusion, with WebViewGold, you can easily customize the status bar of your iOS app to match the design of your web content and improve the overall look of your app.