How to override the text color in TextField in Jetpack Compose using MaterialTheme?

Question

I'm trying to use TextField() from Jetpack Compose. I want the text color to be white.

I found this to be working:

ProvideTextStyle(TextStyle(color = Color.White)) {
   TextField(
       ...
   )
}

However, I want to override this in the Theme level, so that I don't need to repeatedly write ProvideTextStyle. I saw that MaterialTheme only accepts the following params:

@Composable
fun MaterialTheme(
    colors: Colors = MaterialTheme.colors,
    typography: Typography = MaterialTheme.typography,
    shapes: Shapes = MaterialTheme.shapes,
    content: @Composable () -> Unit
)

So I'm not sure how to do it. Can someone help?

(compose version = 1.0.0-alpha11)

Answer 1

As Adrian Grygutis pointed out on the comment, in 1.0.0, TextField has a parameter colors. You could customize your TextField by calling TextFieldDefaults.textFieldColors(...) with the parameter you want to change.

TextField(
    ...
    colors: TextFieldColors = TextFieldDefaults.textFieldColors(textColor = Color.White),
) {

As for theming, and if you want to avoid calling every time:

ProvideTextStyle(TextStyle(color = Color.White)) {
   TextField(
       ...
   )
}

You could create a composable with your own set of TextFieldColors and add it as a parameter in your TextField. You could for instance, have all colors as white:

@Composable
fun MyAppTextFieldColors(
    textColor: Color = Color.White,
    disabledTextColor: Color = Color.White,
    backgroundColor: Color = Color.White,
    cursorColor: Color = Color.White,
    errorCursorColor: Color = Color.White,
    ...
) = TextFieldDefaults.textFieldColors(
    textColor = textColor,
    disabledTextColor = disabledTextColor,
    backgroundColor = backgroundColor,
    cursorColor = cursorColor,
    errorCursorColor = errorCursorColor,
    ...
)

To avoid calling this in every TextField, you can then create a custom MyAppTextField for your app that calls the default TextField with your custom TextFieldColors as a default parameter:

@Composable
fun MyAppTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    ...
    colors: TextFieldColors = DialogoTextFieldColors(),
) {
    TextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier,
        ...
        colors = colors,
    )
}

That way, you would only need to call MyAppTextField. It's a good way to override colours inherited from the theme if needed.

Answer 2

With 1.0.x the TextField contentColor is based on LocalContentColor.current. You can use the CompositionLocalProvider to provide a custom LocalContentColor.

You can define a custom function like:

@Composable
fun ContentColorComponent(
    contentColor: Color = LocalContentColor.current,
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(LocalContentColor provides contentColor,
        content = content)
}

It can be used with many components, for example the TextField:

ContentColorComponent(contentColor = Color.Blue) {
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}