Tinting your Status Bar in iOS6 and Cordova

Stan Bershadskiy

September 21, 2012
ios6

One of the new “features” of iOS 6 is that you can now tint the status bar. Instead of Default (Grey), Black Transparent, or Black Opaque it can now be anything.

The way iOS decides what color the status bar should be is based on the color of the lowest pixel of a UINavigationBar component. Source

In a Cordova application, or any fullscreen UIWebView app, there’s no UINavigationBar by default, thus no way to tint the status bar.

There is a simple “hack” though that you can employ to get your status bar tinted, you only have to sacrifice one row of pixels.

Tinting your StatusBar in a Cordova project

  1. Open up your MainViewController.xib in XCode
  2. Drag a NavigationBar to your view
    • Set the tint (color) of the navigation bar
      • Set the position of the UINavigationBar to y: -43px;

Now you’re all set. You should see something like this


What We Do

We’ll work closely with your team to instill Lean practices for ideation, strategy, design and delivery — practices that are adaptable to every part of your business.

See what Modus can do for you.

We're Hiring!

Join our awesome team of dedicated engineers.

Loading...