How to change the Status Bar text color with SwiftUI

When I’m developing an iOS app, it’s often necessary to change the color of the text in the Status Bar to increase contrast and allow users to actually read the content in the Status Bar. In this tutorial, I’m going to show how to change the Status Bar text color in an iOS app that uses SwiftUI and Swift 5.

Getting Started

For this tutorial, I’m going to start a new Xcode project. It’s going to be a single view app.

Next, name your project. I’m naming this project “StatusBarTextTutorial”, but you can name it anything you want. Make sure that the User Interface is set to SwiftUI, not Storyboard.

Once you’ve chosen the location for your project, go into your ContentView.swift file, and change the content inside the ContentView struct so it contains the following code:

This will give the app a black background with white text. If we run that on a simulator or device, it should look like this:

If you look near the top right, you can just barely see the green from the battery icon. That’s a good sign because it means that the Status Bar exists! However, we can’t read any of the text, which is why we’re here. We need to change the text color in the Status Bar from black to white.

Changing the Status Bar Text Color

To do that, we need to go into Xcode again and create a new Swift file called HostingController. Then, add the following lines:

Next, go into the SceneDelegate.swift file and change this line

To this:

When we run the app again, it should like this:

iOS screenshot with white status bar and black background

Now the Status Bar text has been changed to white, and we can finally read the text in the Status Bar!

If you want to see the source code for this project, you can view it on Github here: https://github.com/Danevandy99/StatusBarTextTutorial

Leave a Reply

Your email address will not be published. Required fields are marked *