IssueTracker

Jetpack Compose version: All

Material Library Version (M2, M3 or Both?): M3

Material Compose component used: TimePicker

Android Studio Build: Any

Kotlin version: Any

Steps to Reproduce or Code Sample to Reproduce:

Use the Material 3 library TimePicker component, it allows changing colors using TimePickerColors(). However, the list of parameters does not have the color parameter for the ":" i.e. DateSeparator. By default the color value is set to OnSurface token. This is a problem when you're not using Material lib for theming and using a custom theme, but still wanna use TimePicker component.

See this:

@Composable
private fun DisplaySeparator(modifier: Modifier) {
    val style =
        LocalTextStyle.current.copy(
            textAlign = TextAlign.Center,
            lineHeightStyle =
                LineHeightStyle(
                    alignment = LineHeightStyle.Alignment.Center,
                    trim = LineHeightStyle.Trim.Both
                )
        )

    Box(modifier = modifier.clearAndSetSemantics {}, contentAlignment = Alignment.Center) {
        Text(text = ":", color = TimeFieldSeparatorColor.value, style = style)
    }
}

In the attached video notice that the color of ":", stays blackish even for dark theme as I'm using custom design system without material theme.