[Bug] DatePicker theming issues with Android dark mode

[streviranus]

Description

When using an Android device that supports dark mode (i.e. Android 10) and styles inheriting from Theme.AppCompat.DayNight, the DatePicker dialog box has a white background instead of dark gray when the device is in dark mode, resulting in unreadable text.

Related to: (#8029)

Steps to Reproduce

1. Define a theme in your Android project that inherits from Theme.AppCompat.DayNight
2. Make a datepicker theme that inherits from Theme.AppCompat.DayNight.Dialog
3. Add the datepicker dialog style to the application theme like so:
   @style/AppCompatDialogStyle
4. Set the theme of your MainActivity to the application theme defined above.
5. Run the app on a device in dark mode and click on a DatePicker

Expected Behavior

The DatePicker is styled according to the theme, with white text on a dark background.

Actual Behavior

The DatePicker style is only partially applied, resulting in white text on a white background.

Basic Information

• Version with issue: 4.4.0
• Last known good version: Unknown
• IDE: Visual Studio Professional 2019, version 16.4.2
• Platform Target Frameworks:
  • Android: 10.0
• Android Support Library Version: 28.0.0.3
• Affected Devices: Pixel 2 with Android 10.0

Screenshots

Reproduction Link

DisplayAlertTheming 2.zip

[kingces95]

Investigating

[jfversluis]

Same seems to happen to the normal picker dialog. Also in the Gallery app. But only when you apply customizations. If you take out the custom styles in the styles.xml everything will fall in line.

[DennisWelu]

Related to Jan6 comment by @jfversluis, removing this line from "styles.xml" cleared up the problem with the "blank" date picker.

<item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>

[MathewLC]

@jfversluis normal picker has this problem too with the dialog. You guys have plan on fixing? Should I open another issue for that? I'm didn't found any other open about this.

[jfversluis]

No need for a new issue! It’s clear that this happens for all the picker variations. We’re aware and hopefully get around to this soon

If you have any additional information on a possible fix or cause that would be very welcome though

[MathewLC]

I didn't spent too much time looking at it, but I'll definitely do it soon and if I found something I'll let you guys know. Best Regards.

[sebfrie]

Are there any updates on this one? A fix is highly appreciated.

[kazo0]

Is there currently a workaround for this to get the DatePicker dialog to properly show in dark mode?

[stefanbogaard86]

Is there currently a workaround for this to get the DatePicker dialog to properly show in dark mode?

The workaround I used was to add the Xamarin.Forms.Visual.Material package to my project and set the Visual property to "Material" on my datepickers.

[BurkusCat]

When trying to use as spinner datepicker in DayNight mode, a similar issue occurs in Dark mode:

    <item name="android:datePickerDialogTheme">@style/SpinnerDatePickerStyle</item>
  </style>
    
  <style name="SpinnerDatePickerStyle" parent="Theme.AppCompat.DayNight.Dialog">
    <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
  </style>

  <style name="SpinnerDatePicker" parent="android:Widget.Material.DatePicker">
      <item name="android:datePickerMode">spinner</item>
  </style>

[daniel-leinweber]

The nightly feed with Xamarin.Forms version 5.0.1.1876 does not fix the issue for me.

I did not include prereleases at first. Unfortunately it is still not solved in version 5.0.1.2031-nightly

[jfversluis]

I see the nightly didn't run correctly over the weekend, sorry about that. Looking into it now :)

[jfversluis]

Could you try 5.0.0.2151 from the nightly feed (note, no nightly suffix) please? :)

[daniel-leinweber]

The version you mention is not available to me. I guess you meant 5.0.1.2151 and not 5.0.0.2151.

Do I need to add a different package source than https://aka.ms/xf-ci/index.json?

[jfversluis]

Interesting. There is more than one nightly feed it's pushed to 😅 It's Monday, sorry! Let me dig a bit deeper.

[jfversluis]

Hey there! Could you try this feed please? :)

[daniel-leinweber]

Awesome, that worked for me.

I have now installed version 5.0.0.2154-nightly.

[jfversluis]

YAY YAY YAY! Thanks for confirming! This will be in the next Service Release that should be out next week if everything goes well :)

[Jorel254]

@daniel-leinweber Hello, Could you show me the style you implemented to change the datepicker background color?
I tried the nightly build without luck.
Best regards

[jfversluis]

@Jorel254 let's try the other way around; what is styles you have? :D

I had to remove this to make it work: https://github.com/xamarin/Xamarin.Forms/pull/14591/files#diff-ad6ba5549da76edd8ee1934f53d44907391c58a5c8fa7071b8fd7a7e47408c9aL49

[daniel-leinweber]

@daniel-leinweber Hello, Could you show me the style you implemented to change the datepicker background color? I tried the nightly build without luck. Best regards

Sure. I use a custom control that extends the DatePicker by a "NullableDate" Property. Everything else is inherited.

NullableDatePicker

<controls:NullableDatePicker
    x:Name="EndDatePicker"
    Format="dd.MM.yyyy"
    MinimumDate="{Binding Source={x:Reference StartDatePicker}, Path=NullableDate}"
    Visual="Material"
    BackgroundColor="{AppThemeBinding 
        Light={StaticResource LightEntryBackgroundColor}, 
        Dark={StaticResource DarkEntryBackgroundColor}}"
    TextColor="{AppThemeBinding 
        Light={StaticResource LightPrimaryTextColor}, 
        Dark={StaticResource DarkPrimaryTextColor}}"
    NullableDate="{Binding EndDate}"/>

For the BackgroundColor and the TextColor I use AppThemeBinding to define a color for either Light or Dark, but I have not changed any colors of the actual Popup. I think they are derived from the standard colors of the Android Project.

[Jon2G]

@Jorel254 @jfversluis @daniel-leinweber

Our team just tested both ways. I can confirm this is working.
I appreciate the time you took to help me with this issue.
However, the time picker appears to have the same theming issue
¿Should we create a new ticket about time picker?
I'm much obliged

[Jorel254]

@daniel-leinweber, @jfversluis
I appreciate the time you took to help me with this issue.
I'm much obliged.

[jfversluis]

@Jorel254 @Jon2G My pleasure!

I think the picker should have worked as well. But from what I understand the picker still shows this problem? Also with this NuGet? Could you provide a reproduction case?

[Jon2G]

Of course:
https://github.com/Jon2G/Xamarin-9033
While making this reproduction I noticed the problem is that the accent color remains to be hotpink even after changing it on styles.xml.
Maybe I'm missing something

[sammacdougall]

I used this and it has reverted to pink accent on the dialog.
I have after much experimentation found a solution to this. I have added a values-night folder to android resources and added a style sheet in here.
With in the style sheet I have added my styling for night mode.
I have added my code for light mode in the default style sheet under the values folder.
If there is a site to share this info others may be interested.
Night mode code below in style sheet.

<style name="Theme.Splash" parent="android:Theme"> @xml/splash_screen_night true </style> <style name="MainTheme" parent="MainTheme.Base"> #2196F3 @style/CustomDatePickerDialog </style> <style name="CustomDatePickerDialog" parent="ThemeOverlay.AppCompat.Dialog"> #2196F3 #FFFFFF #292929 #2196F3 #FFFFFF/item> #FFFFFF #2196F3 </style>

(edited)

[mos379]

@sammacdougall that's what I did too long time ago but I can't remember why that is not the best solution.

[sammacdougall]

Well if you remember then please share. I have spent to much time trying to find a solution for this. If I have no styling it has hot pink as the accent. Even with the xamarin forms latest library. My testers are very pedantic and do not like this so this is the best I can come up with.

…

On Thu, 21 Oct 2021, 5:59 pm mos379, ***@***.***> wrote: @sammacdougall <https://github.com/sammacdougall> that's what I did too long time ago but I can't remember why that is not the best solution. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9033 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHTZBZQ4YBKPBGBBNVKIAP3UH7B47ANCNFSM4KACQP3Q> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[mina5500]

Issue fixed with appcompat theme ... but issue with ok cancel colors always pink ... was able to set colors before.
However it does not work with material theme ... white background unreadable popup
@jfversluis

[jfversluis]

Please open an issue if something is still not right with all the details you can get. Screenshots, and preferably a reproduction showing the issue. Thanks!

[mos379]

@sammacdougall
I'm pretty sure I did it with this one in my values-night scheme

<style name="AppCompatDialogStyle" parent="Theme.AppCompat.DayNight.Dialog">
    <item name="colorAccent">@color/colorAccent</item>
  </style>

[meta-byte]

Currently using dark theme (Android 11)
Xamarin version 5.0.0.2196
NO custom styling applied to themes. Only styling has been done to elements

Reproduced it here as well: XamarinForms-9033
This is a default Flyout app. The button on the about page has been changed to a date picker.

[jfversluis]

While building your reproduction I noticed this in the output

Detected package downgrade: Xamarin.Essentials from 1.7.0 to 1.6.1. Reference the package directly from the project to select a different version.
XamarinForms_9033.Android -> XamarinForms_9033 -> Xamarin.Essentials (>= 1.7.0)
XamarinForms_9033.Android -> Xamarin.Essentials (>= 1.6.1)
Detected package downgrade: Xamarin.Forms from 5.0.0.2196 to 5.0.0.2012. Reference the package directly from the project to select a different version.
XamarinForms_9033.Android -> XamarinForms_9033 -> Xamarin.Forms (>= 5.0.0.2196)
XamarinForms_9033.Android -> Xamarin.Forms (>= 5.0.0.2012)

Meaning, not all packages were in sync for all projects. After updating all and rebuilding, it works correctly.

[mina5500]

i have the same issue i used the same project in original issue up and it is not working
can you please help @jfversluis

DisplayAlertTheming 2.zip

@jfversluis

[jfversluis]

@mina5500 please never paste code as a screenshot and always as text. I won't type it all over from an image :)

<style name="AppCompatDialogStyle" parent="Theme.AppCompat.DayNight.Dialog.Alert">
  <item name="colorAccent">#FF0000</item>
</style>

remove the parent attribute from this to make it work. Or, if you don't need this at all remove the whole entry as well as references to it.

[mina5500]

@jfversluis i already uploaded the whole project as zip file .. the screenshot was just for quick look :)

[mina5500]

i am confirming that it is working fine on sample solution
thanks @jfversluis 👍

but in my production project i am using

  <style name="MainTheme" parent="MainTheme.Base">
    <item name="android:windowBackground">@xml/splash_screen</item>
  </style>

which causes the backgroud to mess up

this was working fine in earlier versions of XF
any ideas ? @jfversluis

Update i added parent and it fixed my issue 😊 @jfversluis

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.DayNight">
    <item name="colorAccent">#29aae3</item>
  </style>

[meta-byte]

While building your reproduction I noticed this in the output

Detected package downgrade: Xamarin.Essentials from 1.7.0 to 1.6.1. Reference the package directly from the project to select a different version.
XamarinForms_9033.Android -> XamarinForms_9033 -> Xamarin.Essentials (>= 1.7.0)
XamarinForms_9033.Android -> Xamarin.Essentials (>= 1.6.1)
Detected package downgrade: Xamarin.Forms from 5.0.0.2196 to 5.0.0.2012. Reference the package directly from the project to select a different version.
XamarinForms_9033.Android -> XamarinForms_9033 -> Xamarin.Forms (>= 5.0.0.2196)
XamarinForms_9033.Android -> Xamarin.Forms (>= 5.0.0.2012)

Meaning, not all packages were in sync for all projects. After updating all and rebuilding, it works correctly.

Thanks for pointing it out! Completely missed that.