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)

You can define colors like this (colors is parameter od TextField): colors = TextFieldDefaults.textFieldColors(textColor = YourColor) — Adrian Grygutis, Jul 07 '21 at 18:45

Arthur Bertemes · Answer 1 · 2022-05-30T11:56:08.113

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 = MyAppTextFieldColors(),
) {
    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.

Gabriele Mariotti · Answer 2 · 2022-11-23T16:11:23.580

14

The M2 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") }
    )
}

edited Nov 23 '22 at 16:11

answered Mar 31 '21 at 10:11

Gabriele Mariotti

320,139
94
887
841

1

I've tried to apply this to a BasicTextField and it doesn't work, any hint? To make it work I have to change the style like this: `textStyle = TextStyle.Default.copy(fontSize = fontSize.sp, color = fontColor)` – GuilhE Feb 17 '22 at 19:11

score 13 · Accepted Answer · answered May 31 '21 at 15:14

I want to override this in the Theme level

Modify the content of MaterialTheme composable in your app's theme composable to include TextStyle.

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = {
            ProvideTextStyle(
                value = TextStyle(color = Color.White),
                content = content
            )
        }
    )
}

Now your provided TextStyle will be used at App theme level.

setContent {
    MyAppTheme {
        // app content
    }
}

This should be the right answer. We are setting the color scheme to the whole `MyAppTheme`. — Javi, Jan 24 '23 at 11:03

score 4 · Answer 4 · answered Feb 09 '21 at 13:35

4

You can create your own TextField Widget with desired color and use it across all places,

@Composable
fun ColoredTextField(value: String, onValueChange: (String) -> Unit){
    ProvideTextStyle(TextStyle(color = Color.White)) {
        TextField(value = value, onValueChange = onValueChange)
    }
}

Now start using ColoredTextField instead of TextField and by changing color in your Widget, it gets applied to all the places.

answered Feb 09 '21 at 13:35

Rajan Kali

12,627
3
25
37

1

Thanks! This can be a nice solution, but I was hoping there is a way to do it on the theme level. – I'm a frog dragon Feb 10 '21 at 03:14

score 3 · Answer 5 · answered May 30 '21 at 20:17

3

In 1.0.0-beta07 you are able to use the textStyle property to override the style and therefore the content color. Also, see Styling TextField.

TextField(
   ...
   textStyle = TextStyle(color = Color.Blue) 
)

answered May 30 '21 at 20:17

yannickpulver

2,235
1
23
31

This only changes the color of the value being typed into the textfield, how do you change the label color aswell? – alfietap Jul 13 '21 at 13:36
TextField( value = name, onValueChange = {}, textStyle = TextStyle(color = Color.White), label = { Text(text = label, modifier = Modifier, color = Color.White, style = TextStyle(fontStyle = FontStyle.Italic)) }, readOnly = true ) – Oke Uwechue Oct 11 '22 at 03:56
(i.e. you can directly set the 'color' argument in the Text element contained within the "label" parameter) – Oke Uwechue Oct 11 '22 at 04:03

score 0 · Answer 6 · answered Nov 09 '22 at 12:24

Configure your application's MaterialTheme with your own Color object configuration, setting the content color parameters (onPrimary, onSecondary and so on).

MaterialTheme(
    colors = Colors(
        primary = Color.Black,
        secondary = Color.Black,
        background = Color.Black,
        onPrimary = Color.Red,
        onSecondary = Color.Red,
        onBackground = Color.Red
    )
)

Note: for the font colors to take effect, you must set the main colors (primary, secondary and so on). This is due to the logic defined in androidx.compose.material.Colors::contentColorFor.

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

6 Answers6