Android style

[stesvis]

Question

Hello, long shot but, is there really no way to customize the colors on Android? Is it always blue no matter what?

[u15767]

You can specify theme styles in the android style settings (android/app/src/main/res/values/styles.xml). This is how I did it:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <!-- Customize your theme here. -->
      <item name="android:windowBackground">@color/background</item>
      <item name="colorPrimary">@color/foreground</item>
      <item name="colorPrimaryDark">@color/darkgrey</item>
      <item name="android:navigationBarColor">@color/darkgrey</item>
      <item name="colorAccent">@color/highlight</item>
      <item name="android:datePickerDialogTheme">@style/MyDatePickerDialogTheme</item>
   </style>

   <style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
      <!-- If you want you can override only colorAccent -->
      <item name="colorPrimary">@color/foreground</item>
      <item name="colorPrimaryDark">@color/foreground</item>
      <item name="android:colorAccent">@color/highlight</item>

      <!-- Or you can change very item color -->
      <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
   </style>

   <style name="MyDatePickerStyle" parent="@android:style/Widget.Material.Light.DatePicker">
      <item name="android:headerBackground">@color/highlight</item>
      <item name="android:dayOfWeekBackground">@color/highlight</item>
      <item name="android:dayOfWeekTextAppearance">@color/highlight</item>
      <item name="android:headerMonthTextAppearance">@color/highlight</item>
      <item name="android:headerDayOfMonthTextAppearance">@color/highlight</item>
      <item name="android:headerYearTextAppearance">@color/highlight</item>
      <item name="android:yearListItemTextAppearance">@color/highlight</item>
      <item name="android:yearListSelectorColor">@color/highlight</item>
      <item name="android:calendarTextColor">@color/highlight</item>
   </style>
</resources>

The colors are defined in the separate colors.xml file looking like:

<resources>
  <color name="background">#000000</color>
  <color name="darkgrey">#000000</color>
  <color name="foreground">#ffffff</color>
  <color name="highlight">#cf468f</color>
</resources>

[u15767]

But also I would appreciate setting at least some colors programmatically. An alternative for android would be to provide the name of a defined style which is used when instantiating the date chooser.

[stesvis]

Thank you, i forgot to say that I'm using it with Expo, so unfortunately this solution won't work for me

[u15767]

In this case it would require setting colors without themes on the level of Android. I searched the web for setting those colors programmatically, but it usually came down to selecting predefined themes. And if this is no option for Expo (I don't know as I use the bare workflow), then it may be challenging to solve this issue.

[toplac]

@u15767 does your solution include support for multiple themes ?

[u15767]

@toplac What I define above is actually a theme. So from an Android point of view, it should be possible to define multiple themes with different settings. But I am not aware of any solution for changing the theme at runtime.

[mariusgaciu]

I'm also using it with Expo and was wondering if Android styles will be added sometime down the line or it's not a priority at the moment?

@stesvis Have you found any solution to the issue?

[jessypouliot98]

I used to have an issue where the accent color was green (which I do want for my app), but my buttons where white on white (invisible). After upgrading from expo sdk 47 to 48 I now have the same as yours (blue).

I saw there's a way to set textColor for the buttons, but that's not much help considering the calendar and top bar is blue and clashing with my app :(

I tried looking for a way to update the colors/styles.xml with an expo plugin but didn't have any luck finding this.

Any direction into changing the color of this without having to eject from expo would be very appreciated

[SerranoPablo]

Not possible yet?

[joediv]

@jessypouliot98 did you end up finding a working around for Expo? Seeing the same issue. I thought primaryColor in the expo config would do it but guess not. https://docs.expo.dev/versions/latest/config/app/#primarycolor

[x7Michi10x]

You can specify theme styles in the android style settings (android/app/src/main/res/values/styles.xml). This is how I did it:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <!-- Customize your theme here. -->
      <item name="android:windowBackground">@color/background</item>
      <item name="colorPrimary">@color/foreground</item>
      <item name="colorPrimaryDark">@color/darkgrey</item>
      <item name="android:navigationBarColor">@color/darkgrey</item>
      <item name="colorAccent">@color/highlight</item>
      <item name="android:datePickerDialogTheme">@style/MyDatePickerDialogTheme</item>
   </style>

   <style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
      <!-- If you want you can override only colorAccent -->
      <item name="colorPrimary">@color/foreground</item>
      <item name="colorPrimaryDark">@color/foreground</item>
      <item name="android:colorAccent">@color/highlight</item>

      <!-- Or you can change very item color -->
      <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
   </style>

   <style name="MyDatePickerStyle" parent="@android:style/Widget.Material.Light.DatePicker">
      <item name="android:headerBackground">@color/highlight</item>
      <item name="android:dayOfWeekBackground">@color/highlight</item>
      <item name="android:dayOfWeekTextAppearance">@color/highlight</item>
      <item name="android:headerMonthTextAppearance">@color/highlight</item>
      <item name="android:headerDayOfMonthTextAppearance">@color/highlight</item>
      <item name="android:headerYearTextAppearance">@color/highlight</item>
      <item name="android:yearListItemTextAppearance">@color/highlight</item>
      <item name="android:yearListSelectorColor">@color/highlight</item>
      <item name="android:calendarTextColor">@color/highlight</item>
   </style>
</resources>

The colors are defined in the separate colors.xml file looking like:

<resources>
  <color name="background">#000000</color>
  <color name="darkgrey">#000000</color>
  <color name="foreground">#ffffff</color>
  <color name="highlight">#cf468f</color>
</resources>

@u15767 It seems not possible to change "android:headerBackground" in Dark-Mode. Has anyone here already made experience with this?

[olarcher]

@stesvis I managed to change the color in the Expo managed workflow with this solution: https://stackoverflow.com/q/77703362/4350421 Doesn't allow you to change the color at runtime though.

[chrismerino]

@stesvis I managed to change the color in the Expo managed workflow with this solution: https://stackoverflow.com/q/77703362/4350421 Doesn't allow you to change the color at runtime though.

Thank you! Using the Expo Plugin works great!

[codersandipdas]

this is working for me. v7.6.2 android/app/src/main/res/values/styles.xml

<resources>

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

    <style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#6074F9</item>
    </style>

</resources>