Hi there We are building a mobile app where the branding/colour scheme on the app is quite light (basically white). Unfortunately the default colour scheme of the text on the status bar is also white. On Android it seems to be ok as Android automatically places a black background at the top of the app with the white status bar text over it. On iOS it renders the app full page without the black background in the status bar. When you therefore render the app in iOS, all you see is the colour of the battery charge level as white text on a white background does not actually show (see images below_. We played around with some of the settings in the app's Phonegap configuration. Some of the options we tried: Option 1: <preference name="StatusBarStyle" value="default" /> Option 2: <preference name="StatusBarOverlaysWebView" value="true" /> Option 3: <preference name="StatusBarOverlaysWebView" value="false" /> <preference name="StatusBarStyle" value="default" /> <preference name="DisallowOverscroll" value="true" /> <preference name="StatusBarBackgroundColor" value="#000000" /> Option 4: preference name="StatusBarStyle" value="lightcontent" /> The various options tried above had various different affects on the app, but strangely enough on iOS it was only affecting the splash screen for a few seconds after which it goes back to the original white text. On the home page of the app, the bottom bar had a white line under it (roughly the same height as the status bar). Some screen shots of some of the effects: Image 1 (white text with light background) : Image 2 (bottom navigation bar has a white bar roughly the size of the statusbar at the bottom): When running the application as a Web Application and running the application in full screen mode on iOS (by using the browser add to homescreen functionality), it renders the same way as on Android (black status bar background with white text). Image 3 (web app version showing correctly): Image 4 (navigation bar at the bottom showing correctly): Does anyone have any idea why the settings only has an effect for a few seconds on the splash screen and then reverts back to default? Any advice will be greatly appreciated as always. Thank you
asked
Gustav Coleske
1 answers
2
Do you have the Mobile Features included in your project? This might overwrite the settings you define in your Phonegap config. Either set them properly in your Mobile Features widget or remove that widget (which is not really a great solution).
The splash screen works though because at that point, your mobile features widget is not loaded yet.