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

How to change Status Bar text color in iOS

  1. Set the UIViewControllerBasedStatusBarAppearance to YES in the .plist file.

  2. In the viewDidLoad do a [self setNeedsStatusBarAppearanceUpdate];

  3. Add the following method:

    - (UIStatusBarStyle)preferredStatusBarStyle
    {
    return UIStatusBarStyleLightContent;
    }

Note: This does not work for controllers inside UINavigationController, please see Tyson's comment below :)

Swift 3 - This will work controllers inside UINavigationController. Add this code inside your controller.

// Preferred status bar style lightContent to use on dark background.
// Swift 3
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}

Swift 5 and SwiftUI

For SwiftUI create a new swift file called HostingController.swift

import Foundation
import UIKit
import SwiftUI

class HostingController: UIHostingController<ContentView> {
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}
}

Then change the following lines of code in the SceneDelegate.swift

window.rootViewController = UIHostingController(rootView: ContentView())

to

window.rootViewController = HostingController(rootView: ContentView())

Change the status bar background color color past iOS 7

In iOS 7 and later, the status bar is transparent. Set the backgroundColor of your view to the color you want for the status bar.

Or, you can add a 20px-high subview with red color at the top of your view.

See the Apple Transition Guide for more.

Also, make sure that your preferredStatusBarStyle is UIStatusBarStyleLightContent. and in your Info.plist set "View controller-based status bar appearance" to "NO".

How to change Status Bar text color in iOS

  1. Set the UIViewControllerBasedStatusBarAppearance to YES in the .plist file.

  2. In the viewDidLoad do a [self setNeedsStatusBarAppearanceUpdate];

  3. Add the following method:

    - (UIStatusBarStyle)preferredStatusBarStyle
    {
    return UIStatusBarStyleLightContent;
    }

Note: This does not work for controllers inside UINavigationController, please see Tyson's comment below :)

Swift 3 - This will work controllers inside UINavigationController. Add this code inside your controller.

// Preferred status bar style lightContent to use on dark background.
// Swift 3
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}

Swift 5 and SwiftUI

For SwiftUI create a new swift file called HostingController.swift

import Foundation
import UIKit
import SwiftUI

class HostingController: UIHostingController<ContentView> {
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}
}

Then change the following lines of code in the SceneDelegate.swift

window.rootViewController = UIHostingController(rootView: ContentView())

to

window.rootViewController = HostingController(rootView: ContentView())

How can I change color of Status Bar background?

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
}

enum UIStatusBarStyle : Int

  • case default : A dark status bar, intended for use on light
    backgrounds.
  • case lightContent : A light status bar, intended for use on dark
    backgrounds.
  • case darkContent : A dark status bar, intended for use on light
    backgrounds.

If you want to change the background color of the status bar together, you can do the following:

    if #available(iOS 13.0, *) {
let statusBarView = UIView(frame: view.window?.windowScene?.statusBarManager?.statusBarFrame ?? CGRect.zero)
statusBarView.backgroundColor = backgroundColor
view.addSubview(statusBarView)
} else {
// Fallback on earlier versions
let statusBarView = UIView(frame: UIApplication.shared.statusBarFrame)
statusBarView.backgroundColor = backgroundColor
view.addSubview(statusBarView)
}

Xamarin Status bar text color

Use the following code in style.xml when you change status bar color .

<item name="android:windowLightStatusBar">true</item>

This makes the text will always appear whatever the background color is .

Sample Image

Refer to

Change status bar text color when primaryDark is white.

Swift: Status bar color different from Navigation bar color

You should use UINavigationBarAppearance to customise the appearance of a navigation bar, instead of changing the background colour of the views directly.

https://developer.apple.com/documentation/uikit/uinavigationbarappearance

You can either set these directly on the UINavigationBar (standardAppearance, compactAppearance, scrollEdgeAppearance, compactScrollEdgeAppearance) or on your view controller's navigation item.

var appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .white
self.navigationItem.standardAppearance = appearance
self.navigationItem.scrollEdgeAppearance = appearance


Related Topics



Leave a reply



Submit