iOS 7
status bar customization
background color change
text color modification
iOS development

How to change the status bar background color and text color on iOS 7?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

On iOS 7, the status bar became visually integrated with the app's interface, which changed how customization works. You can control the text style directly, but you cannot set a standalone status bar background color through a dedicated API; instead, you style the view behind it.

Changing the Status Bar Text Color

The modern iOS 7 pattern is view-controller-based appearance. First, make sure the app lets view controllers control the status bar by setting UIViewControllerBasedStatusBarAppearance to YES in Info.plist, or by simply leaving the default behavior in place if the key is absent.

Then override preferredStatusBarStyle in your view controller:

objectivec
- (UIStatusBarStyle)preferredStatusBarStyle {
    return UIStatusBarStyleLightContent;
}

When the view controller appears or the style changes, ask UIKit to refresh the status bar:

objectivec
[self setNeedsStatusBarAppearanceUpdate];

UIStatusBarStyleLightContent gives you light text, which is typically used over a dark navigation bar or header. The default style gives darker text suitable for light backgrounds.

Why Background Color Works Differently

There is no supported iOS 7 API that says "set the status bar background color to blue." The status bar is transparent over your app's topmost interface, so the visible color actually comes from the view underneath it.

In many apps, that background is the navigation bar. If your screen uses a navigation controller, changing the bar tint often changes the apparent status bar background at the same time.

objectivec
1[[UINavigationBar appearance] setBarTintColor:[UIColor colorWithRed:0.12
2                                                              green:0.18
3                                                               blue:0.35
4                                                              alpha:1.0]];
5[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
6[[UINavigationBar appearance] setTitleTextAttributes:@{
7    NSForegroundColorAttributeName: [UIColor whiteColor]
8}];

With a dark bar tint and UIStatusBarStyleLightContent, the status bar area looks dark with white text even though you did not color the status bar directly.

Adding a Custom View Behind the Status Bar

If your layout does not use a navigation bar, create a view that occupies the top status bar area. On iOS 7, the status bar height is usually 20.0 points in portrait.

objectivec
1- (void)viewDidLoad {
2    [super viewDidLoad];
3
4    UIView *statusBarBackground = [[UIView alloc] initWithFrame:CGRectMake(0, 0,
5                                                                           self.view.bounds.size.width,
6                                                                           20.0)];
7    statusBarBackground.autoresizingMask = UIViewAutoresizingFlexibleWidth;
8    statusBarBackground.backgroundColor = [UIColor darkGrayColor];
9    [self.view addSubview:statusBarBackground];
10}
11
12- (UIStatusBarStyle)preferredStatusBarStyle {
13    return UIStatusBarStyleLightContent;
14}

This makes the top strip appear dark while the status bar text stays light. In a full-screen layout, you may also need to position your main content below that top region so controls do not render underneath it unintentionally.

A common source of confusion is that the visible controller is not always the one deciding the status bar style. If your screen is embedded in a UINavigationController, that container may control the result.

One practical solution is to subclass the navigation controller:

objectivec
1@interface AppNavigationController : UINavigationController
2@end
3
4@implementation AppNavigationController
5
6- (UIStatusBarStyle)preferredStatusBarStyle {
7    return [self.topViewController preferredStatusBarStyle];
8}
9
10@end

That lets each top view controller specify its own text style cleanly.

Common Pitfalls

  • Trying to color the status bar directly instead of styling the view that sits behind the transparent status bar area.
  • Forgetting that container controllers such as UINavigationController may control the visible status bar style.
  • Assuming preferredStatusBarStyle is broken when the appearance configuration is really the issue.
  • Hard-coding the top inset without considering full-screen layouts, rotation, or navigation bars.
  • Treating the iOS 7 status bar like a standalone widget instead of part of the screen composition.

Summary

  • On iOS 7, change status bar text style with preferredStatusBarStyle.
  • Refresh text appearance with setNeedsStatusBarAppearanceUpdate.
  • The visible status bar background color comes from the view behind the transparent bar.
  • A navigation bar tint or a custom top view usually provides the desired background look.
  • Container controllers such as UINavigationController may need to forward status bar style decisions.

Course illustration
Course illustration

All Rights Reserved.