Change the Color of the Status Bar iOS Tutorial

The status bar can have a dark and light appearance inside an app In this tutorial the appearance of the status bar will be changed. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSColorStatusBarTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the Storyboard. Select the View and in the Attributes Inspector change the Background Color to Light Gray. Build and Run the Project. The default style of the status bar is dark content.

The style of the status bar can be changed to a status bar with white content. Go to the ViewController.swift file and add the following lines of code.

override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
}

The preferredStatusBarStyle property is set to lightContent. Build and Run the project to see the content of the status bar changed to light.

Next, go back to the Storyboard, Select the View Controller and in the Editor menu Select Embed in Navigation Controller. Select the Navigation Bar and in the Attribute Inspector set the Bar Tint color to red. The Storyboard will look like this.

Build and Run the project, The content of the status bar is dark again, which is the default. The reason for this is, iOS asked for the style of the status bar of the navigation controller instead of the contained view controller.

To change the style of the navigation controller to lightinside the app, add the following viewDidAppear(_:) method

override func viewDidAppear(_ animated: Bool) {
    navigationController?.navigationBar.barStyle = .black
}

Build and Runthe Project again, this time the content of the status bar changed to white.

You can download the source code of the IOSColorStatusBarTutorial at the ioscreator repository on Github .