When customizing BasicTextField's selection color ...

# compose-android

[Hieu Truong]

When customizing BasicTextField's selection color (both cursor thumb & selected range color), I have to wrap BasicTextField with CompositionLocalProvider like this:

val customTextSelectionColors = TextSelectionColors(
        handleColor = Blue06,
        backgroundColor = BlueAlpha04
    )
    CompositionLocalProvider(LocalTextSelectionColors provides customTextSelectionColors) {
        BasicTextField(...)

How to let it work globally without creating wrapper like above?
I tried to put into App Theme, but it does not work.

@Composable
fun AppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val color = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }
    val customColorsPalette = if (darkTheme) {
        AppDarkColorsPalette
    } else {
        AppLightColorsPalette
    }
    val customTextSelectionColors = if (darkTheme) {
        DarkTextSelectionColors
    } else {
        LightTextSelectionColors
    }
    CompositionLocalProvider(
        AppLocalColorsPalette provides customColorsPalette,
        LocalTextSelectionColors provides customTextSelectionColors,
    ) {
        MaterialTheme(
            colors = color,
            typography = MaterialTheme.typography,
            shapes = Shapes,
            content = content
        )
    }
}

[Hieu Truong]

After posted for few minutes, I realized that moving CompositionLocalProvider from parent of MaterialTheme to its child then it will work.

MaterialTheme(
        colors = color,
        typography = MaterialTheme.typography,
        shapes = Shapes,
    ) {
        CompositionLocalProvider(
            AppLocalColorsPalette provides customColorsPalette,
            LocalTextSelectionColors provides customTextSelectionColors,
            content = content
        )
    }