iOS when keyboard shows up in dark mode it change color to gray

[yoldar]

Hi! On iOS when keyboard shows up in dark mode it change color to gray when animation stop:

How to fix it?
Tested on iOS 14.0 and 12.4.8

[Pseudo-Nym]

I'm having the same problem after setting preference in config.xml:

<preference name="KeyboardStyle" value="dark" />

Prior to setting this preference in the config.xml I was not getting dark keyboard at all in iOS (tested in iOS 14.1 iPhone XS Max) Visually it looks as if, once the animation completes, the background behind the keyboard turns white. Just like the visual provided by yoldar.

note keyboard switches between light and dark as expected in Android 9

[ivandroid]

I have this white background appearing right after the keyboard is hidden. How to get rid of it? It’s really annoying in the dark mode causing kind of flickering

[vadimwe]

Any updates?

[knubie]

My guess is that this happens because the webview is resizing and the background behind the keyboard is white.

[gianmd]

same issue here, any solutions?

[knubie]

I solved this by changing the background color of the main view in MainViewController.m.

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Call the method below.
    [self setupBackground];
    [self.launchView setAlpha:1];
}

- (void)setupBackground
{
    // If iOS is in darkmode:
    if(self.view.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
        // Set whatever color you'd like here. I'm using black as an example. Values for each color can be 1-0.
        self.view.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:1.0];
    } else {
        self.view.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:1.0];
    }
}

// A hook that gets called when the dark mode setting changes.
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
{
    [super traitCollectionDidChange:previousTraitCollection];

    if (@available(iOS 13.0, *)) { // Needed if your app supports iOS 12
        if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
            [self setupBackground];
        }
    }
}

However given that this file is generated by cordova and not usually checked into version control, it would probably be better to implement as a plugin or a hook.

To implement as a plugin, you could perhaps just create the setBackground method in objective-c, and call it from Javascript based on the prefers-color-scheme media feature. You can listen for changes to this setting like this:

window.matchMedia("(prefers-color-scheme: dark)").addListener(function() {
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    MyPlugin.setBackground({red: 0, blue: 0, green: 0});
    Keyboard.setKeyboardStyle("dark");
  } else {
    MyPlugin.setupBackground({red: 1, blue: 1, green: 1});
    Keyboard.setKeyboardStyle("light");
  }
});

To implement as a hook you could hook into the after_platform_add and copy your custom MainViewController.m into the ios platform directory. (platforms/ios/AppName/Classes/MainViewController.m).

The advantage to using the plugin method is that it's a bit easier to keep the UIView background color in sync with whatever background color you've set for your application in Javascript. The disadvantage is that you must wait for the javascript to call the method, which means it may display the wrong background when opening/switching to the app in some cases.

[metinjakupi]

any news about this?

[knubie]

@metinjakupi This is a solved issue. See my comment above. The issue should probably be closed now.

[ItsSkynet]

@metinjakupi This is a solved issue. See my comment above. The issue should probably be closed now.

i'm using this plugin as part of a cordova project that relies on cloud builds, and i don't have the ability to modify the mainviewcontroller. as it stands, having an option to declare the color of the keyboard but not the background of the webview frame makes this "issue" feel more like a request to improve the plugin.

i really don't code on obj-c, otherwise i would have done some fork that solves this issue. i hope someone that follows this can help add such functionality... that or ionic-team can help improve the plugin.

it would be really appreciated.

[SunboX]

any news about this?

[SunboX]

If anyone comes across this issue, this works for me: https://github.com/EddyVerbruggen/cordova-plugin-webviewcolor
But it's sad that I have to use another plugin for that.