IssueTracker

The following release(s) address this bug.It is possible this bug has only been partially addressed:

• androidx.graphics:graphics-shapes:1.0.0-alpha04

We're still running into this bug, it's pretty problematic as it becomes impossible to differentiate between selectable and unselectable days in the date picker since their colors for each are always the same.

Would really appreciate if someone could look into this!

To ensure your TextStyles work correctly with different Material themes, you should avoid setting explicit colors within your TextStyle definitions. This allows text items to automatically adapt to different themes (light/dark/etc.), provides a more consistent and accessible user experience, and prevents issues caused by hardcoded color values like the sample above has.

Having said that, the DatePicker and DateRangePicker are relying on the picker colors param to set the color for their various parts, and as mentioned above, its doing so with a ProvideTextStyle and such. @gkauffman - Is it safe to assume that the last comment regarding the selectable and unselectable days is referring to a case where colors were provided through the typography?

@sg...@google.com, thank you so much for the help on this. Here's a minimally reproducible example:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CustomTheme {
                Column(modifier = Modifier.padding(8.dp)) {
                    DatePickerTest()
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DatePickerTest() {
    DatePicker(
        state = DatePickerState(
            selectableDates = object : SelectableDates {
                override fun isSelectableDate(utcTimeMillis: Long): Boolean {
                    // Dates before today are not selectable, and should appear disabled
                    return utcTimeMillis >= System.currentTimeMillis()
                }
            },
            locale = java.util.Locale.getDefault(),
            initialDisplayMode = DisplayMode.Picker,
        ),
        colors = DatePickerDefaults.colors(
            containerColor = Color.Red,
            selectedDayContentColor = Color.Blue,
            disabledDayContentColor = Color.Gray,
        )
    )
}

@Composable
fun CustomTheme(
    content: @Composable () -> Unit,
) {
    MaterialTheme(
        // DatePicker colors only work if the typography line below is commented out
        typography = customTypography(),
        content = { content() },
    )
}

@Composable
fun customTypography() = Typography(
    displayLarge = TextStyles.h1(),
    displayMedium = TextStyles.h2(),
    displaySmall = TextStyles.h3(),
    headlineLarge = TextStyles.h1(),
    headlineMedium = TextStyles.h2(),
    headlineSmall = TextStyles.h3(),
    titleLarge = TextStyles.body1Bold(),
    titleMedium = TextStyles.body2Bold(),
    titleSmall = TextStyles.body3Bold(),
    bodyLarge = TextStyles.body1(),
    bodyMedium = TextStyles.body2(),
    bodySmall = TextStyles.body3(),
    labelLarge = TextStyles.body3Bold(),
    labelMedium = TextStyles.detail2(),
    labelSmall = TextStyles.detail2(),
)

@Composable
fun text() = ColorTokens.Text.color()

@Composable
fun textHushed() = ColorTokens.TextHushed.color()

data class ColorToken(val light: Color, val dark: Color) {
    @Composable
    fun color() = if (isSystemInDarkTheme()) dark else light
}

object ColorTokens {
    val Text =
        ColorToken(light = Color(0XFF2E2E27), dark = Color(0XFFDBDAC9))
    val TextHushed =
        ColorToken(light = Color(0XFF707062), dark = Color(0XFFA4A493))
}

object TextStyles {
    @Composable
    fun h1(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Bold,
        lineHeight = TextUnit(28f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun h2(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Bold,
        lineHeight = TextUnit(22f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun h3(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Light,
        lineHeight = TextUnit(18f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body1(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Light,
        lineHeight = TextUnit(22f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body1Bold(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Bold,
        lineHeight = TextUnit(22f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body2(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Light,
        lineHeight = TextUnit(20f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body2Bold(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Bold,
        lineHeight = TextUnit(20f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body3(color: Color = textHushed()) = TextStyle(
        fontWeight = FontWeight.Light,
        lineHeight = TextUnit(18f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun body3Bold(color: Color = text()) = TextStyle(
        fontWeight = FontWeight.Bold,
        lineHeight = TextUnit(18f, TextUnitType.Sp),
        color = color,
    )

    @Composable
    fun detail2(color: Color = textHushed()) = TextStyle(
        fontWeight = FontWeight.Light,
        lineHeight = TextUnit(14f, TextUnitType.Sp),
        color = color,
    )
}

If you have the typography = customTypography() line commented out, the date picker colors work as expected. If you have the typography = customTypography() line uncommented, the date picker colors do not work properly and all days have the same color regardless of whether they are selectable or not.

As you suspected, we are indeed setting colors within our TextStyle definitions. We did this because we wanted certain TextStyles to be a certain color by default (e.g. h1 is black but detail2 is dark gray). This has worked well for us up until this DatePicker problem. Open to other ways of setting up our theming though, thanks again for taking a look at this!

Unlike many of our components that just take a slot for a Composable lambda, the date-pickers have a more complex UI that includes Text composables that are internal to the component. This is probably the reason you mainly hit this issue with the pickers.

To ensure we give precedence for the colors that are defined at the DatePickerColors over the colors that are set in the TextStyles, we will need to adjust the internal Texts and pass the relevant color via their color parameter.

Once this is fixed, it should be available at the following 1.4.x alpha release.

Project: platform/frameworks/support
Branch: androidx-main
Author: Shalom Gibly <sgibly@google.com>
Link:      https://android-review.googlesource.com/3291088

DatePicker colors with typography-defined colors

DatePicker colors with typography-defined colors

Fix the way we apply colors at the DatePicker and the
DateRangePicker when a `Typography` is configured to have TextStyles
with colors.

The change ensures that whatever is set at the DatePickerColors takes
presedence over any color that was set at the Typography's TextStyles.

Fixes: 347031394
Test: Added tests
Relnote: "DatePickerColors now correctly take precedence over any
conflicting colors defined at the theme's Typography text styles.
Also note that this update adjusts the `color` parameter's position in
the date picker functions and introduces a `contentColor` parameter
for customizing the header and title text colors."

Change-Id: I30d0307b11ba2e1a02535928ab4e4131100692a8

Thank you so much for fixing!! Looking forward to using the fix

The following release(s) address this bug.It is possible this bug has only been partially addressed:

• androidx.compose.material3:material3:1.4.0-alpha02
• androidx.compose.material3:material3-android:1.4.0-alpha02
• androidx.compose.material3:material3-jvmstubs:1.4.0-alpha02
• androidx.compose.material3:material3-linuxx64stubs:1.4.0-alpha02