How to change the default theme color

[ugendrang]

Currently the datetime picker displays title background, date/time selection color and Footer text(Cancel, Ok) color with green color.

Is it possible to change the default theme color?

[mmazzarolo]

Hey @ugendrang , please take a look at #29

[ugendrang]

Thank you @mmazzarolo, its working after below changes in 'styles.xml'

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    item name="android:datePickerDialogTheme">@style/Dialog.Theme</item>
    <item name="android:timePickerDialogTheme">@style/Dialog.Theme</item>
</style>

<style name="Dialog.Theme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF0000</item>
    <item name="android:textColorPrimary">#0000FF</item>
</style>

[SirPhemmiey]

@ugendrang you missed an opening tag over there. :-)

[kurniawanj26]

@ugendrang where can I find the styles.xml ?

[madeeha96]

It's always showing blue theme. How ever i use "#FFA500" i.e. orange
how can i use this color?

[ChenhuaWANG22]

@mmazzarolo Is it possible to change color with using Expo ? Or we have to eject the project in order to change the color ?

I have read issue #29, issue #106 and some other related thread, edit all styles.xml file in my project folder and even create an android directory tree with styles.xml in it.
After hours trying, I'm still stuck with the color problem.
So please shed some light on this.

[mmazzarolo]

I don't think it's available in Expo yet: expo/expo#313

[paolospag]

Hi @mmazzarolo
this code:

<style name="Dialog.Theme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF0000</item>
    <item name="android:textColorPrimary">#0000FF</item>
</style>

doesn't work for me with react-native 0.58.6 and react-native-modal-datetime-picker 6.1.0.

colors seem to remain the Android default ones

Any workaround?

[mmazzarolo]

ciao @paolospag !

No idea honestly, have you already tried checking in the React-Native issues? 🤔

Maybe this issue might be helpful?

[paolospag]

ciao @mmazzarolo 😄
sorry for the late response.

This code:

<style name="SpinnerDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
    <item name="android:datePickerStyle">@style/MyDatePicker</item>
    <item name="android:colorAccent">@color/colorPrimary</item>
    <item name="android:colorControlNormal">@color/colorPrimary</item>
</style>

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

has definitely solved my problem, thank you so much!

[spidi123q]

Its not working for me! any other ways

[ivgraai]

@ChenhuaWANG22 Try to change primarycolor in Expo.

[animeclover]

I try the below blog for adding datePickerAndroid and it's working fine also provide when a user has multiple input field for date solution.

https://infinitbility.com/how-to-add-datepickerandroid-in-react-native-with-color-changes

[rakesh-201]

Is there any way to change the theme of date picker in an expo managed react native app ?

[muheet9]

@ugendrang where can I find the styles.xml ?

You can find the styles.xml file inside your android/app/src/main/res/values

[olarcher]

@rakesh-201 This is now possible with Expo config plugins, see https://stackoverflow.com/q/77703362/4350421