Please add props to change theme color of the picker.

[ajaykumar97]

Feature Request

As the default picker theme is "White & green in android and White in iOS". I think there should be an option/prop to change the theme or color of the Date-Picker?

Why it is needed

This feature is needed so as to match the picker color with the app theme and to make it more useful.

[slorber]

+1 would be great!

Can it be done with a JS api only? or is it required to modify android theme files?

[mwss1996]

+1, i realy love if it was implemented

[jerryheir]

This color is the main issue why a lot of people don't use this package to be honest

[robertherber]

+1

My main issue is not being able to change the gradient of the Android picker, not possible to make it look good on a non-white background.

[guilleSequeiraWolox]

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

• colorAccent is the color of header of picker and selector
• textColor is the color of numbers and text buttons
• textColorPrimary is the color of text of month.

I hope it works for you, regards.

[jerryheir]

Thanks soooooo much

On Wed, Oct 23, 2019, 5:29 PM guillesequeira notifications@github.com wrote:

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i putted:

• colorAccent is the color of header of calendar and selector
• textColor is the color of numbers and text buttons
• extColorPrimary is the color of text of month.

I hope it works for you, regards

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/react-native-community/react-native-datetimepicker/issues/20?email_source=notifications&email_token=AHDHZJY3WWEOKKILM5NTQRDQQB3WRA5CNFSM4ISTNG52YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECCBPAQ#issuecomment-545527682, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHDHZJ5WWKGP7QURAOSXCMTQQB3WRANCNFSM4ISTNG5Q .

[robertherber]

@guilleSequeiraWolox Thanks for the excellent example for how to style it statically. However - being able to set it dynamically is a must if your app supports any kinds of themes (which is a common case in these days of Dark Mode).

[slorber]

Hi,

Unfortunately it will never be possible to change the color of this picker through a prop. The native widget does not allow so, and even android native developers complain about this.

The only way is through xml. If you want to have support for this,asking here won't help, you'd rather complain to google directly.

[robertherber]

@slorber I see. Maybe it'd be possible to switch native android themes through this library? Then you'd at least be able to provide a dark and light option to switch between :)

[mikehardy]

It should be possible to tell the component what theme name to use if my Android skills aren't totally missing. Then yes, you could pass a theme prop in and (in combo with react-native-appearance to fetch current UI mode) set a dark mode correctly

[mikehardy]

Yes - any PR to do this would alter these calls: https://github.com/react-native-community/react-native-datetimepicker/blob/master/android/src/main/java/com/reactcommunity/rndatetimepicker/RNDatePickerDialogFragment.java#L65

Using this constructor: https://developer.android.com/reference/android/app/DatePickerDialog#DatePickerDialog(android.content.Context,%20int,%20android.app.DatePickerDialog.OnDateSetListener,%20int,%20int,%20int)

To pass in a value that was "somehow passed to Java" (via an API that does not exist yet on the module)

@Swaagie @slorber does that seem like the rough shape of a solution for Android that would work here? It's not great but it seems dictated by the platform

[mikehardy]

Implementation ideas - for dark mode specifically at least the system already has a named theme for it, so for the "typical" (i.e. "support light and dark mode") use case there's no need to mess with themes even as long as you could pass the theme name in as they do here:

https://www.android-examples.com/change-datepickerdialog-theme-in-android-using-dialogfragment/

But the names themselves have moved across APIs (see update here) https://stackoverflow.com/a/25585029/9910298

[teamzz111]

Agree, we needs this feature.

[bsor-dev]

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

• colorAccent is the color of header of picker and selector
• textColor is the color of numbers and text buttons
• textColorPrimary is the color of text of month.

I hope it works for you, regards.

How to make this happen on expo that not ejected?

[pie6k]

A bit hacky, but I've managed to make it 'kinda white' using shadow props

<DateTimePicker
          style={{
            shadowColor: '#fff',
            shadowRadius: 0,
            shadowOpacity: 1,
            shadowOffset: { height: 0, width: 0 },
          }}
          mode="time"
          value={valueDate}
          minuteInterval={10}
          onChange={(event, date) => {
            if (date) {
              onChange(convertDateToMinutes(date));
              return;
            }
          }}
        />

[NozhenkoD]

@sbycrosz, @vonovak Guys, I've seen you created textColor feature, but it still doesn't work. I use 2.3.0 version. Please take a look a snack - https://snack.expo.io/@nozhenkod/rndatetimepicker-text-color

[vonovak]

@NozhenkoD please open a separate issue, thank you.

[ws333]

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

* colorAccent is the color of header of picker and selector

* textColor is the color of numbers and text buttons

* textColorPrimary is the color of text of month.

I hope it works for you, regards.

Tip for the those using the time picker and would like to change the colors. Change android:datePickerDialogTheme to android:timePickerDialogTheme

[jamesl1001]

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

• colorAccent is the color of header of picker and selector
• textColor is the color of numbers and text buttons
• textColorPrimary is the color of text of month.

I hope it works for you, regards.

Is this solution still working for anyone using datetimepicker@2.2.3?

My styles.xml file is as follows:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColor">#000000</item>
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
        <item name="android:timePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
        <item name="android:statusBarColor">@color/beige</item>
        <item name="android:textColor">#000000</item>
    </style>

    <style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/blue</item>
        <item name="android:textColor">@color/blue</item>
        <item name="android:textColorPrimary">@color/blue</item>
    </style>
</resources>

But both pickers are still appearing as the default teal and white colours.

[ChathuraPrabhash]

with datetimepicker@2.2.3 above solution not working. still looking for a solution

[biskis]

On what version is this hack working? I have tried multiple versions and none of them is working for me...

[whalemare]

Solution with android theme changes is not ok, because in app we have more than 1 theme (dark, white, custom and etc.), that configured inside React Native, not native part. So, for now we can not use this solution, because colors can be different between themes

[spidi123q]

Is there any working solution for this?

[Silventino]

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

* colorAccent is the color of header of picker and selector

* textColor is the color of numbers and text buttons

* textColorPrimary is the color of text of month.

I hope it works for you, regards.

Tip for the those using the time picker and would like to change the colors. Change android:datePickerDialogTheme to android:timePickerDialogTheme

Works for me, thanks!!

[luancurti]

There are many ideas on this thread we can split them in another issues

• Feature Request Support Dark Theme
• Pass theme resource id to DatePickerDialog (Android only)
• If someone has a problem with textColor open another issue (with a reproducible demo)

Feel free to open this issues.

I can help to implement the feature on Android to pass via prop the themeResId to change the theme of the DatePickerDialog

[biskis]

Maybe somebody else is having the same problem as me.

Simply remove display="calendar" from <DateTimePicker> tag.

After that, it worked perfectly. I don't know why if I have display="calendar" the syle is not working anymore

[spidi123q]

@biskis @Silventino none of the solutions are working for me, can you show all props which is used

[spidi123q]

Finally found a solution pass display="calendar" in android/app/src/main/res/values/styles.xml i put:

 <style name="CalendarDatePickerDialog" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/red</item>
        <item name="android:textColor">@color/red</item>
        <item name="android:textColorPrimary">@color/red</item>
    </style>

[2xSamurai]

Any update on this issue? Is there any permanent way to only show the light datepicker even in iOS dark mode. My datepicker is completely invisible now(background is white). If anyone knows any workaround. Please help.

Thank you

[luancurti]

Any update on this issue? Is there any permanent way to only show the light datepicker even in iOS dark mode. My datepicker is completely invisible now(background is white). If anyone knows any workaround. Please help.

Thank you

Follow this example #204 @2xSamurai

[2xSamurai]

@luancurti Thanks for the workaround. My date picker is in a white modal. Is there any way I can change the font color?

[RBalconi]

For those who are having trouble changing the style of the display="clock" I decided as follows:

In the component:

<DateTimePicker
     [...]
     mode="time"
     display="clock"
 />

And in android/app/src/main/res/values/styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:timePickerDialogTheme">@style/ClockTimePickerDialog</item>
</style>

<style name="ClockTimePickerDialog" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#0055AA</item>
    <item name="android:textColorPrimary">#000</item>
</style>

Sorry for my English, but I hope I have helped someone. 😃

[nabeel-shakeel]

https://github.com/react-native-community/datetimepicker/issues/20#issuecomment-629701414 This worked for me, Thanks

[alex-mironov]

I'm getting datePickerDialogTheme requires API level 21 error on android. does anyone have an idea of what can be wrong?

    <style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/dateRangePicker</item>
        <item name="android:textColor">@color/dateRangePicker</item>
        <item name="android:textColorPrimary">@color/dateRangePickerText</item>
    </style>

Produces:

  Errors found:

  /Users/runner/work/1/s/***/app/src/main/res/values/styles.xml:7: Error: ***:datePickerDialogTheme requires API level 21 (current min is 16) [NewApi]
          <item name="***:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>

[wmarsey]

For anyone ending up here looking for a basic android dark mode solution too like I was (I was getting some white-on-white problems), i needed to do something similar to the above comments but in android/app/src/main/res/values-night/styles.xml.

The pattern is the same, but inherits from Theme.AppCompat.DayNight instead of Theme.AppCompat.Light, and adds a change to android:windowBackground:

<resources>
   ...

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
        <item name="android:timePickerDialogTheme">@style/ClockTimePickerDialog</item>
    </style>

   <!-- for dates -- parent is the daynight theme -->
   <style name="DialogDatePicker.Theme" parent="Theme.AppCompat.DayNight.Dialog">

        <!-- bg colour change -->
        <item name="android:windowBackground">#181818</item>

        <!-- my app primary blue colour -->
        <item name="colorAccent">#68B7FC</item>
    </style>

   <!-- for clocks -- parent is the daynight theme -->
   <style name="ClockTimePickerDialog" parent="Theme.AppCompat.DayNight.Dialog">

        <!-- bg colour change -->
        <item name="android:windowBackground">#181818</item>

        <!-- my app primary blue colour -->
        <item name="colorAccent">#68B7FC</item>
    </style>

   ...
</resources>

[cristianoccazinsp]

Wish this could be configured as well.

[RohovDmytro]

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

* colorAccent is the color of header of picker and selector

* textColor is the color of numbers and text buttons

* textColorPrimary is the color of text of month.

I hope it works for you, regards.

Tip for the those using the time picker and would like to change the colors. Change android:datePickerDialogTheme to android:timePickerDialogTheme

Thank you so freaking much. It would be hard for me to figure out the issue. Nice!

[haidar4243]

You can change your DateTimePicker Header and Body Background by following these steps :

1) go to android/app/src/main/res/values/styles.xml

2)

enter code here
 <resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <item name="android:textColor">#000000</item>

 **Add these two files !!!**

    <item name="android:timePickerDialogTheme">@style/ClockTimePickerDialog</item>
    <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
</style>

 **Add these files also** 

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.DayNight.Dialog">
    <item name="colorAccent">#000000</item>
</style>

<style name="ClockTimePickerDialog" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#000000</item>
    <item name="android:textColorPrimary">#000</item>
</style>

[cristianoccazinsp]

What this issue is really about is also being able to change it from code / react, ideally with simple props.

[pavan168]

Hi, sorry my english is bad but i want to share how i can change theme color of the picker. in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>

• colorAccent is the color of header of picker and selector
• textColor is the color of numbers and text buttons
• textColorPrimary is the color of text of month.

I hope it works for you, regards.

this worked. thanks!

[TylerNRobertson]

None of the above solutions seem to work for newest version 3.0.9. Anyone have any suggestion?

[Andrea-Arguello]

I am also looking for a solution on 3.0.9 for date with display="spinner"

EDIT: This + adding the textColorPrimary mentioned by @guilleSequeiraWolox did it for me

[SarvaDev-123]

For anyone ending up here looking for a basic android dark mode solution too like I was (I was getting some white-on-white problems), i needed to do something similar to the above comments but in android/app/src/main/res/values-night/styles.xml.

The pattern is the same, but inherits from Theme.AppCompat.DayNight instead of Theme.AppCompat.Light, and adds a change to android:windowBackground:

<resources>
   ...

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
        <item name="android:timePickerDialogTheme">@style/ClockTimePickerDialog</item>
    </style>

   <!-- for dates -- parent is the daynight theme -->
   <style name="DialogDatePicker.Theme" parent="Theme.AppCompat.DayNight.Dialog">

        <!-- bg colour change -->
        <item name="android:windowBackground">#181818</item>

        <!-- my app primary blue colour -->
        <item name="colorAccent">#68B7FC</item>
    </style>

   <!-- for clocks -- parent is the daynight theme -->
   <style name="ClockTimePickerDialog" parent="Theme.AppCompat.DayNight.Dialog">

        <!-- bg colour change -->
        <item name="android:windowBackground">#181818</item>

        <!-- my app primary blue colour -->
        <item name="colorAccent">#68B7FC</item>
    </style>

   ...
</resources>

How to pass theme dynamically like when I want to go light theme then calendar show default and when I want to go dark then the calendar will open in the dark mode in react native

[mealCode]

I HOPE THIS WILL HELP YOU SAVE YOUR TIME. I spent about 3-4 hours figuring this out and it's sad :(

I figure it out the reason why it works on some but not on majority. This because modifying the styles.xml only works with vanilla react-native and NOT with manage or bare expo workflow. If you want to test it yourself, you can create two separate dummy projects for management/bare and vanilla react-native so you'll see what I mean.

[harveyconnor]

Would like to see this as a prop rather than an xml change. Would be cool to dynamically change this with user based themes within our apps.

[ASakkeer]

You can try this step, It is worked for me (Android)

https://medium.com/@dexiouz/step-by-step-guide-on-how-to-change-background-and-text-color-of-android-date-time-picker-in-react-fbf1a7dea17e

[robertherber]

I managed to style the DatePicker as a Config Plugin (working with Expo Managed - but of course it requires an updated EAS Build). It could serve as a basis for adding it to react-native-datetimepicker and I'm sure it can help someone else in the meantime:

android-datepicker-color-config-plugin.js

```JavaScript /** @type {import('@expo/config-plugins')} */ const { AndroidConfig, withAndroidStyles, } = require('@expo/config-plugins'); const { assignStylesValue, getAppThemeLightNoActionBarGroup, setStylesItem } = AndroidConfig.Styles; const DIALOG_PICKER_THEME_NAME = 'DialogDatePicker.Theme'; const TIME_PICKER_THEME_NAME = 'DialogTimePicker.Theme'; const ACCENT_COLOR = '#662C69'; /** @type {import('@expo/config-plugins').ConfigPlugin} */ const withTheme = (config) => withAndroidStyles(config, (config) => { const dialogDateParent = { name: DIALOG_PICKER_THEME_NAME, parent: 'Theme.AppCompat.Light.Dialog' }; const dialogTimeParent = { name: TIME_PICKER_THEME_NAME, parent: 'Theme.AppCompat.Light.Dialog' }; config.modResults = setStylesItem({ parent: dialogDateParent, xml: config.modResults, item: { $: { name: 'colorAccent', }, _: ACCENT_COLOR, }, }); config.modResults = setStylesItem({ parent: dialogTimeParent, xml: config.modResults, item: { $: { name: 'colorAccent', }, _: ACCENT_COLOR, }, }); config.modResults = assignStylesValue(config.modResults, { add: true, parent: getAppThemeLightNoActionBarGroup(), name: 'android:datePickerDialogTheme', value: `@style/${DIALOG_PICKER_THEME_NAME}`, }); config.modResults = assignStylesValue(config.modResults, { add: true, parent: getAppThemeLightNoActionBarGroup(), name: 'android:timePickerDialogTheme', value: `@style/${TIME_PICKER_THEME_NAME}`, }); return config; }); module.exports = withTheme; ```

Add it to your app.json like this:

{
  "expo": {
    "plugins": ["./android-datepicker-color-config-plugin.js"]
  }
}

BUT for some reason it does not apply the changes to the TimePicker. The resulting styles.xml looks like this:

styles.xml

```XML ```

Can someone figure out why the TimePicker color doesn't take? I think it looks similar to previous examples in this Issue..

[Sebastianaplikacja]

To make changes to colors i react-native community data picker in expo you need to compile this via Android Studio.

[bombillazo]

Managed Expo builds/creates native apps on the spot, hence why you don't usually commit those files to the repo, the build commands ensure you have a fresh native project setup every time you run build or delete the native folders generated.

This poses a big challenge when it comes to modifying native code in managed Expo. You'd have to go off the trodden path and start version controlling/patching the setup that Expo generates.

Unless a pure JS implementation of a datetimepicker is created, or the colors are exposed through the RN bridge API, it'll be hard to dynamically change colors at runtime.

[iway1]

adding a config plugin based on what @robertherber to this package has created seems like a great idea (hopefully we can figure out how to get it to apply to the time picker too).