We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Rendering issue forcing white text

I'm having a problem with the following Xaml;

<ContentView Grid.Row="3" Grid.Column="2" BackgroundColor="#007367" Padding="21,3">
     <syncfusion:SfNumericTextBox Value="{Binding NiThreshold}" TextAlignment="Center" FormatString="p" PercentDisplayMode="Value" MaximumNumberDecimalDigits="0" BackgroundColor="White" TextColor="Black" ValueChangeMode="OnKeyFocus" Maximum="100" AllowNull="True" Watermark="0 %" />
</ContentView>

On all simulators I try I see the correct render with a white background and a black text, as soon as it hits a real device the textcolor property is often ignored and it is rendered with white text on a white background. The editor still works and if you remove the value I can see the watermark value displayed in it's default color.

I'm using version 17.3.0.14 and have seen the error on my iPad Air with iPadOS 13.1.2, my testers have also reported the issue on an iPhone 6 and another iPad.

I've tried reinstalling the nuget package and I've made sure my AppDelegate is set up correctly and I'm not sure what else to try.

Any ideas?

12 Replies

RA Rachel A Syncfusion Team October 14, 2019 01:41 PM UTC

Hi Simon, 
  
Greetings from Syncfusion. 
  
We suspect that you have enabled the DarkAppearance mode in your device settings. Syncfusion controls supports the dark mode by setting dark theme using the approach given in the below Xamarin.Forms link along with dark theme support provided by Syncfusion. 
  
  
We have attached a sample for your reference (CustomPageRenderer.cs file in iOS platform project). Please check and let us know if you need further assistance on this. 
  
  
Please check the above sample and let us know if your requirement is different from above. 
 
Thanks, 
Rachel. 



PH Phil Holmes October 17, 2019 06:21 AM UTC

There is still something wrong here. My App is NOT doing dark mode, as many apps still do not.

If I manually set the TextColor of the SfNumericTextBox either via Resource setting, or by direct XAML property TextColor="Black", SfNumericTextBox does not honour this if DarkMode is on. If you set TextColor="Blue", it does not change between Dark Mode & non-Dark Mode, but if you set it to "Black", then when you turn Dark Mode on on the device, it changes TextColour to White.

This is wrong! Please advise.


LR Lakshmi Radha Krishnan Syncfusion Team October 18, 2019 01:16 PM UTC

Hi Phil,

We are checking the reported scenario, we will update you further details on Oct 22, 2019.

Regards,
Lakshmi R.


LR Lakshmi Radha Krishnan Syncfusion Team October 22, 2019 06:16 PM UTC

Hi Phil,

 

Query 1: If you set it to "Black", then when you turn Dark Mode on on the device, it changes TextColour to White.

 

 We are able to reproduce the issue “Text color turns white when enable Dark mode along with setting TextColor property to Black in the iOS 13 version” at our end. We are checking the same scenario with Xamarin.Forms Entry.

 

Query 2: My App is NOT doing dark mode, as many apps still do not.

 

We would like to clarify regarding this. Could you please confirm whether you have enabled dark mode in your device settings. If so, we hope it is possible to overcome this issue using the solution provided in the previous update. Could you please check whether it will satisfy your requirement. 

 

Regards,

Lakshmi R. 



BM Brian Macomber October 31, 2019 07:58 PM UTC

I can confirm this behavior also

iOS simulator and device, when set in Dark Mode, the text is rendered as white even when the text color is directly set.  I also set the text to white with dark mode enabled and it's still not rendered as black.  This isn't intuitive with Xamarin Forms since not all platforms have dark mode.

Auto color changing based on iOS Dark Mode should be an opt in thing on Xamarin Forms.   I can confirm also that Dark Mode does not make Xamarin Forms Entry or Editor auto change the text color.

 


BM Brian Macomber October 31, 2019 07:59 PM UTC

To make it clear, I do not expect to have to create a custom renderer on iOS for every one of your controls to prevent them from auto changing the text color based on Dark Mode


BM Brian Macomber October 31, 2019 08:09 PM UTC

If it helps anyone else running across this issue a quick fix is to use a implied app level style to set the text color to #000001...it only changes pure black and then easy to undo when SyncFusion fixes


PH Phil Holmes October 31, 2019 10:51 PM UTC

Hi Lakshmi,

Just in answer to your Question 2, what I meant is that our App is NOT currently handling Dark Mode. It is specifically setting colours, assuming light mode only is being used. The test scenario was, as you suggested, if I DO turn dark mode on the iPad.

One would expect that dark mode behaviour should kick in if controls have their colours left blank/default. Setting a colour to black should not be overwritten, by dark mode. Leaving a colour as blank/default, would reasonably then render as whatever mode the device is in.

The real problem here is highlighted by the solution that Brian mentioned, and I have done, which is to set a colour to #000001, or something not quite "Black". I also note that it is only some SyncFusion controls (namely SfNumericTextBox) that is doing this incorrect behaviour. Most other SyncFusion controls, and Xamarin Forms controls DO NOT behave this incorrect way.

Phil


RA Rachel A Syncfusion Team November 1, 2019 01:22 PM UTC

Hi Phil, 
 
We are checking the feasibility in source level and update further information on 6th November 2019. 
 
Thanks, 
Rachel. 



LR Lakshmi Radha Krishnan Syncfusion Team November 6, 2019 04:33 PM UTC

Hi Phil,

 

We have checked the feasibility and we will improve this in our source level. As of now, you can resolve the reported issue by setting the TextColor property as shown in the below code snippet in the AppDelegate.cs file.

 

Code Snippet:

 

AppDelegate.cs: (C#)

 

private void Forms_ViewInitialized(object sender, Xamarin.Forms.ViewInitializedEventArgs e)

{

            if (e.View != null && e.View is Syncfusion.SfNumericTextBox.XForms.SfNumericTextBox)

            {

                var formsNumericTextBox = e.View as Syncfusion.SfNumericTextBox.XForms.SfNumericTextBox;

                var textColor = formsNumericTextBox.TextColor;

 

                if (e.NativeView != null && e.NativeView is NativeTextBox)

                {

                   (e.NativeView as NativeTextBox).TextColor = UIColor.FromRGBA(float.Parse(textColor.R.ToString()), float.Parse(textColor.G.ToString()), float.Parse(textColor.B.ToString()), float.Parse(textColor.A.ToString()));

                }

            }

}

 

 

 

Please let us know if you need further clarification on this.

 

Regards,

Lakshmi R.

 

 

 


Attachment: NumericTextDarkTheme_1e9605c9.zip


DH Derek Hagen November 19, 2019 04:42 AM UTC

Is there a fix for this yet besides the temporary work around?  For testing I set the iPad simulator to Dark Mode and then for the SfNumericTextBox I set:

BackgroundColor = Color.White;
TextColor = Color.Black;

The text doesn't appear to show being it is white.  Why would the dark theme matter if I am manually setting the backgroundcolor and the textcolor?

In further testing if I do this it works:

BackgroundColor = Color.White;
TextColor = Color.Red;
TextColor = Color.Black;

It seems I need to set the color to anything but black and then back to black again.


RA Rachel A Syncfusion Team November 19, 2019 10:27 AM UTC

Hi Derek, 
 
We have checked the similar scenario with BackgroundColor but it works fine in dark theme. Can you please ensure the same in the attached sample of previous update? 
 
We have considered the” TextColor changes in dark theme” internally as bug. As we are facing some complexity in architecture level changes, it will be included in any of the upcoming release based on the priority. 
 
However, you can make use of workaround until then. 
 
Thanks, 
Rachel.  


Loader.
Live Chat Icon For mobile
Up arrow icon