Can't set statusbar color

I haven’t yet been able to get statusbar color using F7.
according to docs

It automatically detects if your app in full screen mode, and automatically adds with-statusbar class to element if app is in full screen mode (or removes this class if app is not in full screen mode).

In config.xml :
<preference name="Fullscreen" value="true" />

but here’s what I get

Previously when I used Jquerymobile I used cordova-plugin-statusbar to set the statusbar color with no issues.
Now if use that plugin when the app starts the color is what I set in preferences but as soon as the app loads on my phone the stausbar text color turns black. And worse is that if a text field opens keyboard or if I minimize the app and reopen, the navbar goes behind statusbar
Here’s how it looks:

Needless to say that I have this structure

  <!-- App root element -->
  <div id="app">
    <!-- Statusbar overlay element -->
    <div class="statusbar"></div>

Any ideas?

I can recommend for andorid

  • use cordova-plugin-statusbar
  • use Fullscreen false
  • use “StatusBarBackgroundColor” in your config.xml

Thanks for your input. The second screenshot is just that.

<plugin name="cordova-plugin-statusbar" source="npm"/>
<preference name="StatusBarBackgroundColor" value="#303e8e"/>
<preference name="StatusBarStyle" value="lightcontent" />

It is weird that statusbar text turns black. I almost tried all combination of settings and got no luck. Finally I removed all parts of code containing with-statusbar class from framework7.js and now it is back to normal again. Text color remains white and and opening keyboard won’t cause navbar to go behind statusbar.

1 Like

For future reading, whos facing same problem. When play with Phonegap / Cordova.

Im prefer using cordova-plugin-statusbar for control statusbar correctly via config.xml then do this following thing:

  1. inside yourFile.html remove or just comment out this part <div class="statusbar"></div>

  2. inside Main Instance of your app, you need to disable statusbar as well,

    var app = new Framework7({

    statusbar: {
    enable: false.
    // many option you can set here, please see the guide


Finally dont forget to add <preference ... /> in your config.xml file,

Footnote : documentation page