I did the below. Give it a try ```MaterialTheme( ...

# compose-android

[raghunandan]

I did the below. Give it a try

MaterialTheme(
    typography = MaterialTheme.typography.copy(
        bodyLarge = JKTheme.typography.calendarStyle // your calendar style
    )
) {
    DatePicker(
        modifier = Modifier
            .background(JKTheme.colors.ColorWhite)

[shock 11]

Alright I will

[shock 11]

I wrapped my DatePicker in a Parent column, which is direct child of a tray. Where do I call the materialtheme again. Should I call it as a direct parent or the top level parent?

[shock 11]

My code looks like this..

Tray() {
    Column() {
        DatePicker(
            modifier = Modifier.background(JKTheme.colors.ColorWhite)
        )
    }
}

[raghunandan]

just wrap date picker with material theme

[shock 11]

Okay then, let me try that

[shock 11]

yeah that worked

[shock 11]

Thanks

[shock 11]

But now the issue is that the default colors for the different states for the dates have all been reset, the colors for the disabled/ selected and unselected

[shock 11]

Basically, they're all the same color now which I assume is the color of the text style I passed

[shock 11]

This works, but now all the dates look the same whether they're selected/ unselected or disabled

[shock 11]

And the thing is I actually also overrided the DatePickerDefaults.colors, passed the colors and they worked, but now this applying this style seems to basically override everything again

[shock 11]

See where I overrided the DatePickerDefaultColors and passed my own, which I then passed to the colors param in the DatePicker

[shock 11]

You can see the selected day didn't even show the default which I think is supposed to be white. Same for others like disabled dates, same colour

[raghunandan]

colors = DatePickerDefaults.colors(
    containerColor = JKTheme.colors.ColorWhite,
    weekdayContentColor = JKTheme.colors.ColorGrey80,
    dayInSelectionRangeContentColor = JKTheme.colors.ColorPrimary50,
    dayInSelectionRangeContainerColor = JKTheme.colors.ColorPrimary20,
    selectedDayContentColor = JKTheme.colors.ColorWhite,
    selectedDayContainerColor = JKTheme.colors.ColorPrimary50,
    yearContentColor = JKTheme.colors.ColorGrey100,
    dayContentColor = JKTheme.colors.ColorPrimary60,
    disabledDayContentColor = JKTheme.colors.ColorPrimary60.copy(alpha = 0.5f),
    todayContentColor = JKTheme.colors.ColorPrimary60,
    todayDateBorderColor = JKTheme.colors.ColorPrimary50,
    currentYearContentColor = JKTheme.colors.ColorPrimary60,
    selectedYearContentColor = JKTheme.colors.ColorWhite,
    selectedYearContainerColor = JKTheme.colors.ColorPrimary50
)

There are other params that you can try as well. Seems to work in my case

[shock 11]

I see I will try that. But the way I did mine was declare and call the function from outside of the DatePicker, that is function for the colour. Do you think that might have to do anything with it?

[shock 11]

Please I'm going to try this, but I'll take just a little time off. I'll be back 👍🏻

[shock 11]

This honestly does not seem to work for me, every other thing besides the text seems to work. For example, selectedDayContainer and todayDateBorderColor works. Even the containerColor is working

[shock 11]

But everything that has to do with the text does not work, mainly the selectedDayContentColor and the disabledDayContentColor

[shock 11]

I'm honestly not sure what the issue is

[raghunandan]

If you want full customization probably have to build a date picker component yourself. Not sure i can help much here. It worked for my usecase. We also had a custom theme as well. Every google component built is for material

[shock 11]

Alright thanks, but is it possible for you to recreate this solution in a small project and share? So I can properly inspect my code and see if I am maybe doing something wrong. I don't know how easy creating a custom DatePicker would be, but at least let me try to find the issue with this one

[shock 11]

We are also using a custom theme as well

[shock 11]

Hello @raghunandan you still there? There is an update on this issue that I am having

[shock 11]

So apparently I tried this in an empty project it worked, using the lato Font. There was no custom theme used here just the basic provided theme classes

[shock 11]

but you said you used a custom theme and it worked for you so I am still wondering what the issue is tbh

[raghunandan]

Ok. Not sure what is your set up. We have custom theme but its not build on top of material theme

[raghunandan]

Its our own custom theme and typography. We have built our own components except in case of date picker where we wrap it material theme pass our own typography

[shock 11]

Pretty much the same with ours. It is also a custom theme that isn't built ontop of the MaterialTheme

[shock 11]

This is just the normal typography class where I downloaded the lato font and passed it to. This is in the tryout project

[shock 11]

And this is just what I did that made it work. Weird that this is happening

[shock 11]

So it turns out that I have discovered the problem

[shock 11]

Adding a color to the TextStyle class that you pass is what is overriding the other colors. Removing it helps

[shock 11]

You can try to add a fixed color to any TextStyle you pass raghunadam and you will encounter the same issue I was facing