iOS 13 dark mode default text colour is white about cordova-plugin-statusbar HOT 23 CLOSED

Adding the following to my config.xml worked for me as a workaround:

<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
    <string>Light</string>
</config-file>

from cordova-plugin-statusbar.

Adding the following to my config.xml worked for me as a workaround:

<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
    <string>Light</string>
</config-file>

For me what worked was adding in the config.xml:

<widget>
  ...
  <platform name="ios">
    ...
    <edit-config file="*-Info.plist" mode="merge" target="UIUserInterfaceStyle">
      <string>Light</string>
    </edit-config>
  </platform>
<widget>

Edit: Doesn't seem to work on the splash screen though

from cordova-plugin-statusbar.

As a temp workaround you can disable dark mode for an app, https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface/choosing_a_specific_interface_style_for_your_ios_app

from cordova-plugin-statusbar.

As a workaround add the following to the config.xml:

<config-file target="*-Info.plist" parent="UIUserInterfaceStyle">
  <string>Light</string>
</config-file>

<config-file target="*-Info.plist" parent="UIViewControllerBasedStatusBarAppearance">
  <true />
</config-file>

It adds UIUserInterfaceStyle and UIViewControllerBasedStatusBarAppearance properties to platforms/ios/{appname}/{appname}-Info.plist.

In case of issues check that this file has the properties added.

from cordova-plugin-statusbar.

Workaround to fix this:

1. Instal the plist package via npm install --save-dev plist

2. Add this to your config.xml file under <platform name="ios"> tag, so it will be:
   <platform name="ios"> <hook src="hooks/ios_fix_dark_mode.js" type="after_prepare" /> </platform>

3. On your root folder, create a folder calles hooks and inside it, create a file called ios_fix_dark_mode.js.

4. Inside that file, paste this code below, replacing [Your App Name] to your own app's name. You can also, go into platforms/ios/ and see which name it is to double check.

var fs = require('fs');
var path = require('path');
var plist = require('plist'); // npm install --save-dev plist

let plistDir = path.join(
  __dirname,
  '../platforms/ios/[Your App Name]/[Your App Name]-Info.plist'
);

editPlistFile();

function editPlistFile() {
  var xml = fs.readFileSync(plistDir, 'utf8');
  var newPlistData = plist.parse(xml);

//   console.log(newPlistData); // uncomment to see the old plist file's content 
  newPlistData.UIUserInterfaceStyle = 'Light';
  newPlistData.UIViewControllerBasedStatusBarAppearance = true;
//   console.log(newPlistData); // uncomment to see the new plist file's content 

  xml = plist.build(newPlistData);
  fs.writeFileSync(plistDir, xml, { encoding: 'utf8' });
}

5. Every time you use one of those commands below, this code will run, making sure that the correct plist is used.

cordova platform add
cordova build
cordova run
all variants with ionic in the beginning

from cordova-plugin-statusbar.

Yeah, then on iOS 13 we should use that new value and default in older versions and reduce the styles to dark and light

from cordova-plugin-statusbar.

The workaround doesnt allow to detect darkmode via css anymore.

from cordova-plugin-statusbar.

The workaround doesnt allow to detect darkmode via css anymore.

Yes correct i have the same Problem. Please fix this Issue

from cordova-plugin-statusbar.

I'm thinking that in order to support dark mode, we'll have to first determine whether the UI is in dark mode and maybe reverse the "light" status bar styles with the "dark" status bar styles.

So in otherwords while in Dark mode, if you're using default, it may use blackopaque instead.

But I'm not entirely sure if that's a good idea since you can't apply the same logic in reverse without cause breaking behaviour.

Considering most iOS styles are deprecated, I don't think it's too bad if we release a major version with just 2 styles.
But the real problem is:
In Light mode, default is black and the others are white
In Dark mode, default is white and the others are also white, so it's not possible to set it to black while in dark mode.

from cordova-plugin-statusbar.

I found I had to also set UIViewControllerBasedStatusBarAppearance to true:

<edit-config file="*-Info.plist" mode="merge" target="UIViewControllerBasedStatusBarAppearance">
  <true />
</edit-config>

from cordova-plugin-statusbar.

@dmitryevseev If this value is set, executing window.matchMedia('(prefers-color-scheme: dark)').matches in the webview will always return false.

This led me to spend some energy looking for the source of the error. If the project starts to consider dark mode compatibility someday, don't forget to remove this code first.

from cordova-plugin-statusbar.

I am using ionic 6. I have tried all above options but still my status bar is not visible in dark theme in iPhone XR . For light theme it is working fine. Suggest solution on urgent basis

from cordova-plugin-statusbar.

I'm thinking that in order to support dark mode, we'll have to first determine whether the UI is in dark mode and maybe reverse the "light" status bar styles with the "dark" status bar styles.

So in otherwords while in Dark mode, if you're using default, it may use blackopaque instead.

But I'm not entirely sure if that's a good idea since you can't apply the same logic in reverse without cause breaking behaviour.

from cordova-plugin-statusbar.

As a temp workaround you can disable dark mode for an app, https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface/choosing_a_specific_interface_style_for_your_ios_app

This workaround did not work for me. No matter what I do, status bar is always white on white in dark mode.

from cordova-plugin-statusbar.

The docs seem to suggest that there is .darkContent for this, https://developer.apple.com/documentation/uikit/uistatusbarstyle, and it has a beta tag on it as if the docs have been updated for iOS 13?

from cordova-plugin-statusbar.

Adding the following to my config.xml worked for me as a workaround:

<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
    <string>Light</string>
</config-file>

This didn't work for me. I can see in Xcode that the "User Interface Style" attribute is correctly set to "Light", but still the status bar renders with white text. Any ideas?

from cordova-plugin-statusbar.

@p3v9d5ui If nothing works, write in the MainViewController.m:

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    if (@available(iOS 13.0, *)) {
        self.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
    }
    // Do any additional setup after loading the view from its nib.
}

Edit: Verified that the config entry in the cordova (9.0.1) and cordova-ios (5.0.1) works on iOS 13.1.2

from cordova-plugin-statusbar.

Has anyone tried this in Xcode 11.3.1? I tried all of the mentioned solutions and none of them worked for me

from cordova-plugin-statusbar.

Has anyone tried this in Xcode 11.3.1? I tried all of the mentioned solutions and none of them worked for me

async setStatusBar() {
    if (this.platform.is('cordova')) {
      this.statusBar.overlaysWebView(true);

      if (this.platform.is('ios')) {
        if (await this.getDarkMode()) {
          this.statusBar.styleLightContent();
        } else {
          this.statusBar.styleLightContent();
        }
      }

      if (this.platform.is('android')) {
        if (await this.getDarkMode()) {
          this.statusBar.styleLightContent();
        } else {
          this.statusBar.styleLightContent();
        }
      }
    }
  }

https://github.com/codextde/cordova-plugin-statusbar-color-fix

from cordova-plugin-statusbar.

"fs is not defined" when I tried these steps - have a working update?

Workaround to fix this:

1. Instal the plist package via npm install --save-dev plist
2. Add this to your config.xml file under <platform name="ios"> tag, so it will be:
   <platform name="ios"> <hook src="hooks/ios_fix_dark_mode.js" type="after_prepare" /> </platform>
3. On your root folder, create a folder calles hooks and inside it, create a file called ios_fix_dark_mode.js.
4. Inside that file, paste this code below, replacing [Your App Name] to your own app's name. You can also, go into platforms/ios/ and see which name it is to double check.

var path = require('path');
var plist = require('plist'); // npm install --save-dev plist

let plistDir = path.join(
  __dirname,
  '../platforms/ios/[Your App Name]/[Your App Name]-Info.plist'
);

editPlistFile();

function editPlistFile() {
  var xml = fs.readFileSync(plistDir, 'utf8');
  var newPlistData = plist.parse(xml);

//   console.log(newPlistData); // uncomment to see the old plist file's content 
  newPlistData.UIUserInterfaceStyle = 'Light';
  newPlistData.UIViewControllerBasedStatusBarAppearance = true;
//   console.log(newPlistData); // uncomment to see the new plist file's content 

  xml = plist.build(newPlistData);
  fs.writeFileSync(plistDir, xml, { encoding: 'utf8' });
}

1. Every time you use one of those commands below, this code will run, making sure that the correct plist is used.

cordova platform add
cordova build
cordova run
all variants with ionic in the beginning

from cordova-plugin-statusbar.

Hey, just add var fs = require('fs'); to the top of the file. Sorry, my bad... It got cut out by github editor's

from cordova-plugin-statusbar.

Thanks, that made the build work, but the statusbar still ignores my preferences from config.xml:

<preference name="StatusBarBackgroundColor" value="#000000" /> <preference name="StatusBarStyle" value="blackopaque" />

that used to work pre-wkwebview. Any workarounds?

from cordova-plugin-statusbar.

@anujparmar545 Remove this code in the config.xml (If they exist):

<config-file target="*-Info.plist" parent="UIUserInterfaceStyle">
  <string>Light</string>
</config-file>

<config-file target="*-Info.plist" parent="UIViewControllerBasedStatusBarAppearance">
  <true />
</config-file>

Recompile the project, then click on targets - info in xcode to check if there is a key named User Interface Style and delete it if it exists.

from cordova-plugin-statusbar.