expo 35 DatePickerIOS dark theme

Please provide the following:

  1. SDK Version: 35
  2. Platforms(Android/iOS/web/all): IOS

Hi all, i have a problem with DatePickerIOS with dark mode…
i have a white popup with DatePickerIOS and now don’t see nothing because the font is white…
there is any prop or configuration for use a black font?

thanks a lot

1 Like

any news about that?

This is happening. Please help? My app is technically unusable in dark mode coz of this.

I suggest you create a minimal example as a snack to demonstrate the problem and then create an issue here with a link to the snack and any relevant details. Then post a link to the issue here.

This issue also happens at SDK33.
I think you can solve this issue by using new Appearance module, to detect light or dark mode, and then change backgroudColor of the View surrounding DatePickerIos.
I just tested with my app as below:

1 Like

Thanks, @herbertlim. But if other components automatically do the right thing it seems like this is still a bug? (I have not tested this myself, so maybe I misunderstood something.)

Bumping to see if there’s any update on this. What’s weird is that an Expo managed app should default to the light theme if ios.userInterfaceStyle is not set, and that seems to be working for my app for everything but DatePickerIOS. And, according to the Appearance docs, we should not be able to use Appearance (https://docs.expo.io/versions/v35.0.0/sdk/appearance/) if ios.userInterfaceStyle is not set to automatic. I’m going to play around with this today, but curious what others have figured out already.

I just tried this out in the Expo client and found the following:

  • When leaving ios.userInterfaceStyle undefined in app.json (defaults to light mode) or setting it to light: Appearance.getColorScheme() always returns “light” even if the phone is in dark mode.

  • When leaving ios.userInterfaceStyle is set to automatic: Appearance.getColorScheme() will return “light” in light mode and “dark” in dark mode.

So. there does not appear to be a way to freeze your app to light mode and get DatePickerIOS to look right.

So. there does not appear to be a way to freeze your app to light mode and get DatePickerIOS to look right.

can’t you set ios.userInterfaceStyle to light or leave it blank as you mentioned in your comment?

Apologies, I’m mixing the original problem and a potential hack around it.

Here (the original problem) is what happens on my SDK 35 managed app (where userInterfaceStyle is set to light) when dark mode is turned on:

That white spot on the bottom is where the DatePickerIOS is - if I were to throw a dark background on it, you would see what has happened to the text:

As long as the phone is in dark mode, it looks the same regardless of the value of userInterfaceStyle.

I’ve been playing around with it on my ExpoKit app, as well, and I did notice that setting UIUserInterfaceStyle in info.plist to Light seems to fix the issue- though only on a device and not the simulator. There’s other ways to set this, and Expo managed builds could be doing it another way (setting this plist value wouldn’t really be possible on the Expo Client). Wondering if it could make a difference that my DatePickerIOS is in a Modal (since the other way force to light mode in native code is against the window).

I’m going to run through the different possibilities (managed vs. ExpoKit, standalone vs Expo client, simulator vs. device, different settings, etc.) and then I’ll open an issue with the findings. From here, seems like a lot of it would be out of Expo’s control, other than maybe updating to DateTimePicker when it’s fixed or possibly setting that plist value on standalone builds if it isn’t already.

1 Like

Update: I opened an issue with workarounds here: https://github.com/expo/expo/issues/5897

In short, anything that is not on the main ViewController itself is not affected by the userInterfaceStyle setting in app.json. You’ll need to set ios.infoPlist to include UIUserInterfaceStyle set to Light in order for DatePickerIOS to show up correctly when inside a Modal, or for alerts or action sheets to show in light mode. This also means that these things will never override to light mode inside the Expo Client.

Hi all, there is any news?
i have the ```

in a modal and with dark mode is white..... is impossible to change color.....
1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.