How to Change the Status Bar Background Color and Text Color on iOS 13

iOS 13 setting status bar background color

Kuray just provided me a solution here:

https://freakycoder.com/ios-notes-13-how-to-change-status-bar-color-1431c185e845

Add the below to viewdidload. Please head over to his medium post and give him a few claps!

if #available(iOS 13.0, *) {
        let app = UIApplication.shared
        let statusBarHeight: CGFloat = app.statusBarFrame.size.height

        let statusbarView = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: statusBarHeight))
        statusbarView.backgroundColor = UIColor.red
        view.addSubview(statusbarView)
    } else {
        let statusBar = UIApplication.shared.value(forKeyPath: "statusBarWindow.statusBar") as? UIView
        statusBar?.backgroundColor = UIColor.red
    }

Change Status Bar Color in iOS 13?

1st way

You can check iOS version and add custom status bar like this ->

override func viewDidAppear(_ animated: Bool) {
    if #available(iOS 13, *) {
        let statusBar = UIView(frame: (UIApplication.shared.keyWindow?.windowScene?.statusBarManager?.statusBarFrame)!)
        statusBar.backgroundColor = .systemBackground
        UIApplication.shared.keyWindow?.addSubview(statusBar)
    }
}

2nd way

You can customize UINavigationBarAppearance

if #available(iOS 13.0, *) {
    let navBarAppearance = UINavigationBarAppearance()
    navBarAppearance.configureWithOpaqueBackground()
    navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
    navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
    navBarAppearance.backgroundColor = 
    navigationBar.standardAppearance = navBarAppearance
    navigationBar.scrollEdgeAppearance = navBarAppearance
}

In iOS13 the status bar background colour is different from the navigation bar in large text mode

No hacks or funkiness required here. The key is defining the desired appearance and setting this value on BOTH the nav bar's standardAppearance AND its scrollEdgeAppearance. I have the following in the init for my base navigation controller subclass for my entire app:

if #available(iOS 13.0, *) {
    let navBarAppearance = UINavigationBarAppearance()
    navBarAppearance.configureWithOpaqueBackground()
    navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
    navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
    navBarAppearance.backgroundColor = 
    navigationBar.standardAppearance = navBarAppearance
    navigationBar.scrollEdgeAppearance = navBarAppearance
}

How to change status bar text color immediately in Swift in iOS 13

Status bar color is not global (by default) and if you set that to not ViewControllerBased, you can't change it anymore. So you need to change set it inside any view you need like this:

var statusBarStyle = UIStatusBarStyle.default { didSet { setNeedsStatusBarAppearanceUpdate() } }
override var preferredStatusBarStyle: UIStatusBarStyle { statusBarStyle }

these two variables help you to change the status bar. Note that you can call setNeedsStatusBarAppearanceUpdate inside an animation block to make it animatable.

to detect when UserInterfaceStyle change (and update statusBar color accordingly), all views and viewControllers have delegate function for that. So knowing that:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)

    if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
        updateStatusBarColor()
    }
}

And this is the function:

func updateStatusBarColor() {
    switch traitCollection.userInterfaceStyle {
    case .unspecified: statusBarStyle = .default
    case .light: statusBarStyle = .darkContent
    case .dark: statusBarStyle = .lightContent
    }
}

Note that:

the ParentViewController defines the statusBarColor. So if you are using general navigationController or tabBarController, A custom class for them with these codes should be enough.

---

Related Topics