Easy example / tutorial to change the Status Bar color in Nativescript-Angular

[tskweres]

Does anyone have an article or link for easily changing and manipulating the Status Bar color in Nativescript Angular for IOS & Android?

Use case:

I have an app that has a dark mode, and a light mode.

• in dark mode, the background is black, I need the statusbar color to be white.
• in light mode, the background is white, i need to change the statusbar color to black

I'm finding 3 year old threads and plugins without Angular examples etc, does anyone have a straightforward easy way to do this, preferably not in the info.plist file but programatically?

[NathanaelA]

I'm pretty sure you can in your app.css (or whatever your main application wide css file is),

ActionBar.ns-light {
   background-color: white;
}

ActionBar.ns-dark {
   background-color: black;
}

If you want to do it programatically and you have a proplugins subscription; https://plugins.nativescript.rocks/plugin/@proplugins/nativescript-themes
allows dynamic theme changes.

[tskweres]

@NathanaelA Changing the color of the action bar is easy, I mean the status bar, there could be many pages where the ActionBar is hidden.

I'm mostly interested in a transparent status bar, with the battery and time info either in white or in black, screenshot attached: