You may have noticed earlier that, on iOS, the status bar text is black and doesn't look very good with our dark skin. Additionally, we may want to alter Android's status bar tint color. NativeScript provides direct access to native APIs, so we can easily change these to whatever we would like. Both platforms deal with them differently, so we can conditionally alter the status bar for each.

Open app/app.component.ts and let's add the following:

// angular
import { Component } from '@angular/core';

// nativescript
import { isIOS } from 'platform';
import { topmost } from 'ui/frame';
import * as app from 'application';

// app
import { AuthService } from 

'./modules/core/services';

declare var android;

@Component({
  moduleId: 

module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html',
})
export class AppComponent {

  constructor(
    private authService: AuthService
  ) { 
    if (isIOS) {
      /**
       * 0 = black text
       * 1 = white text
       */
      topmost().ios.controller.navigationBar.barStyle = 1;
 

   } else {
      // adjust text to darker color
      let decorView = 

app.android.startActivity.getWindow()
        .getDecorView();
      

decorView.setSystemUiVisibility(android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
    }
  }
}

This will turn the iOS status bar text white:

The second part of the condition adjusts Android to use dark text in the status bar:

Let's also adjust the ActionBar background color while we're at it for a nice touch. On iOS, the status bar background color takes on the background color of ActionBar, whereas on Android, the background color of the status bar must be adjusted via Android colors.xml in App_Resources. Starting with iOS, let's open app/common.css and add the following:

.action-bar {
  background-color:#101B2E;
}

This colors ActionBar as follows for iOS:

For Android, we want our status bar background to present a complimentary hue to our ActionBar background. To do that, we want to open app/App_Resources/Android/values/colors.xml and make the following adjustment:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color 

name="ns_primary">#F5F5F5</color>
  <color 

name="ns_primaryDark">#284472</color>
  <color name="ns_accent">#33B5E5</color>
  

<color name="ns_blue">#272734</color>
</resources>

This is the final result on Android: