How to change StatusBar text color not background

Ionic Native
1

I want to change the statusbar text color not just the background. When I use statusBar.backgroundColorByHexString("#f7f7f7"); the status bar background is changed successfully however the font is soo light that I can barely see it, how do I control the exact font color of the status bar text in Ionic 2 or 3?

There are numerous questions on this but the answers say you should just use the statusBar.backgroundColorByHexString();. However they dont solve the issue of changing just the text color not the background… any ideas?

2

Hey! did you find a solution?

3

$toolbar-md-title-text-color: white;

Add this line in your Theme->variables.scss

1 Like
4

problem solved :smile:

5

Hi! Do you find a solution, I have the same problem… I have a white status bar but the font color text stay white so I can’t even see the status bar! How can we get a white status bar with black font text…

6

in myapp class constructor
image

1 Like
7

For light backgrounds,

platform.ready().then(() => {
// let status bar overlay webview
this.statusBar.overlaysWebView(true);
// set status bar to white
this.statusBar.backgroundColorByHexString(’#ffffff’);
this.statusBar.styleDefault();
})

For dark backgrounds
platform.ready().then(() => {
// let status bar overlay webview
this.statusBar.overlaysWebView(true);
// set status bar to black
this.statusBar.backgroundColorByHexString(’#000000’);
this.statusBar.styleLightContent();
})

6 Likes
8

Hi, I’m trying your example for light backgrounds, this is working fine on android but on IOS the background and the text is white. Any help will be appreciated.