iOS Modal Dialogs have incorrect text color in Dark mode

Using the included sample app, Change to the Dark theme, then navigate to the Dialogs page and tap Show Alert.

Expected: Dark modal window with lighter text
Actual: Dark modal window with dark gray text that's barely visible

I tried to test this in android, but the demo app currently fails to launch.

Is this only in the Theme or also happens without it? Currently not sure dialogs can be styled at all. Can you check?

Our trunk which is using theme 1.0.6 results in dialogs with white text over a dark background. It does seem that something in v2 is causing the text color to be incorrect. For clarity's sake, I'm not trying to set a specific text color, but we do need the dialogs to be legible.

Thanks, I'll check it out.

Should be fixed in 2.0.23

This does not appear to be fixed.

If you have an iOS device in Dark Mode and run the test app for the theme it shows the Alert button as a very dark and just readable blue.

However if you change app.scss to import another theme, (I was testing with Sky), then the Alert button is almost invisible.

Any progress on this - has been a few months...

Easy to re-create

tns create test --template tsc

Then in the onTap() event...just replace with

       dialogs.prompt({
            "title": "TITLE",
            "message": "Test",
            "okButtonText": "OK",
            "cancelButtonText": "CANCEL",
            "inputType": dialogs.inputType.password
        }).then( (r) => {});

In dark theme - the text is displayed dark blue over black background.

Not much time lately, probably next week will have time to look at latest issues.

Any headway on this issue?

Dark mode in ios is not usable.

When can we expect this issue to be fixed?

Over nine months!

It's a relatively high priority issue since it makes ios dark mode almost unusable.

Hello...anyone there??

Just a placeholder before the bot closes the issue.

Bump - been banging my head against the same issue on the action variant to no avail.

Almost coming to the 1 year anniversary of this bug.

I don't like to pre-suppose other people's bugs as easy to fix etc - but isn't this a constant somewhere in the plugin.

I've looked and for the life of me - I can't find it - must be an ios system default it's using.

Anyway - fix appreciated!

Here's my workaround.

Emulates the dialogModule.alert() call.

Most of the code was contributed by Raven from stackoverflow.

I'm by no means an ios expert - but the following code works.

the only thing you'd have to do is - get the current theme and replace with appropriate color - right now hardcoded to red.

export function alert2( obj ) : Promise<void>
{
    if ( platformModule.isAndroid )
    {
        return dialogModule.alert( obj );
    }
    else
    {
        
        return new Promise(function (resolve, reject) {
            try {
                var alertController = UIAlertController.alertControllerWithTitleMessagePreferredStyle( obj.title, obj.message, UIAlertControllerStyle.Alert);
           
                var closeAction = UIAlertAction.actionWithTitleStyleHandler(obj.okButtonText, UIAlertActionStyle.Cancel, (arg: UIAlertAction) => {
                    //code implementation here
                    resolve();
                });
            
                alertController.addAction(closeAction);
        
                // This is how you can force change the color of the title text on the actions (buttons).
                //alertController.view.tintColor = new colorModule.Color("#FF0000").ios; // Color is a class in Nativescript, if we you want the Native IOS value, this is how you do it.
        
                var currentPage = frameModule.Frame.topmost().currentPage;
                var viewController: UIViewController = currentPage.ios;
                viewController.presentModalViewControllerAnimated(alertController, true);
            }
            catch (ex) {
                reject(ex);
            }
        } );
    }
}

Upon further investigation...I looked at the file

node_modules/@nativescript/core/ui/dialogs/dialogs.ios.js

there are 4 lines like arg.textColor = arg.tintColor = color.ios;

if you comment those lines out - the colors are correct for both the light/dark modes.

It doesn't use the color you may have sent in your style file - but the system default - but the colors are reasonable and clearly visible.

@erjdriver

@erjdriver sounds like you may want to open a PR against NativeScript/NativeScript; I believe this is the file to make the changes in?

My solution is a workaround.

It uses the default system colors for the appropriate mode - not the one defined in this plugin or overridden in the user style file.

But it's good enough for me now.

Thanks.

Any ETA when this https://github.com/Rob4226/NativeScript/commit/f373b5d50e91eb631463f92bda54aeb2c875402d commit is getting merged and new version released.

This issue still isn't solved. Any updates?

any updates on this?

Resolved in @nativescript/core 8.5

Navigation Menu

Repository navigation

iOS Modal Dialogs have incorrect text color in Dark mode #184

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

iOS Modal Dialogs have incorrect text color in Dark mode #184

Description

Activity

bundyo commented on Sep 26, 2019

kfisto commented on Sep 26, 2019

bundyo commented on Sep 26, 2019

bundyo commented on Sep 30, 2019

mcgouganp commented on Jan 21, 2020

erjdriver commented on Apr 20, 2020

bundyo commented on Apr 22, 2020

erjdriver commented on May 4, 2020

erjdriver commented on May 30, 2020

erjdriver commented on Jul 10, 2020

grey280 commented on Jul 23, 2020

erjdriver commented on Aug 2, 2020

erjdriver commented on Aug 22, 2020

erjdriver commented on Aug 22, 2020

grey280 commented on Aug 24, 2020

erjdriver commented on Aug 24, 2020

sivo1981 commented on Jan 13, 2021

jelledijkstra97 commented on May 7, 2021

OPADA-Eng commented on Nov 4, 2021

NathanWalker commented on Jul 10, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions