Jetpack Compose TextField text colour in dark mode

Question

I've been experimenting with Jetpack compose and I've noticed that although the text colour updates correctly for Text when you switch to dark mode, the text colour for TextField or OutlinedTextField remains stubbornly black. The labels and hint are correctly coloured though.

Having determined that the default text style for the fields is MaterialTheme.typography.body1 I have updated my app theme to include this workaround:

val typography = if (darkTheme) {
    //TODO: Hack to show text field text in dark mode
    MaterialTheme.typography.copy(body1 = MaterialTheme.typography.body1.copy(color = Color.White))
} else {
    MaterialTheme.typography
}
MaterialTheme(colors = colors, content = content, typography = typography)

But if that is the solution I would have to do that for every typography style and it feels like something that should be automatic. So am I doing something wrong, or is this one of those kinks that will be ironed out before it is officially released?

Here is one of my actual Composables (wrapped in my Theme):

@Composable
fun UsernameField(
    value: String,
    isError: Boolean,
    onValueChange: (String) -> Unit,
) {
    Column {
        OutlinedTextField(
            value = value,
            onValueChange = onValueChange,
            modifier = Modifier.fillMaxWidth(),
            label = { Text("Username") },
            isError = isError,
            trailingIcon = {
                ClearIcon(
                    visible = value.isNotEmpty(),
                    onClick = { onValueChange("") }
                )
            }
        )
        Text(
            if (isError) "Minimum 6 characters" else "",
            style = MaterialTheme.typography.caption,
            color = MaterialTheme.colors.error,
            modifier = Modifier.padding(top = 4.dp)
        )
    }
}

@Composable
fun ClearIcon(visible: Boolean, onClick: () -> Unit) {
    if (visible) IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Cancel,
            contentDescription = "Clear username",
        )
    }
}

score 12 · Accepted Answer · answered Mar 26 '21 at 12:47

Try to wrap it with Surface / apply Surface in composable which uses UsernameField. To put it simply, you don't have proper background on which text could take proper color configuration to contrast it.

There is short example of possible behaviour and fix:

@Preview
@Composable
fun DarkModeTest() {
    MaterialTheme(darkColors()) {
        Column {
            Surface {
                OutlinedTextField(value = "good", onValueChange = {})
            }
            OutlinedTextField(value = "bad", onValueChange = {})
        }
    }
}

By looking into docs:

The Surface is responsible for:

...

Content color: Surface uses contentColor to specify a preferred color for the content of this surface - this is used by the Text and Icon components as a default color.

Works for me, but i still don't understand, why I have to wrap my `OutlinedTextField` with `Surface` to get white text on black background in dark mode — Alexxus, Mar 18 '23 at 18:35

Gabriele Mariotti · Answer 2 · 2021-08-16T12:00:58.490

4

With 1.0.0 the text color of TextField should work without issue in dark mode.

In any case the textColor is currently based on:

textColor: Color = LocalContentColor.current.copy(LocalContentAlpha.current)

You can avoid to change every typography styles using something like:

CompositionLocalProvider(LocalContentColor provides MaterialTheme.colors.secondary) {
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

edited Aug 16 '21 at 12:00

answered Mar 24 '21 at 08:40

Gabriele Mariotti

320,139
94
887
841

Weird. I am using `1.0.0-beta02` but this helps my understanding of how the colours work a bit better. Thanks – Barry Irvine Mar 24 '21 at 08:56
1

Just to confirm, adding `CompositionLocalProvider(LocalContentColor provides MaterialTheme.colors.onSurface)` based on your suggestion resolves the issue but I would expect that to be the default text colour for the TextField anyway – Barry Irvine Mar 24 '21 at 09:02

score 2 · Answer 3 · answered Mar 26 '21 at 00:02

What I have been doing to customize every color on my OutlinedTextField components, is to use the "colors" argument along with the "TextFieldDefaults.outlinedTextFieldColors()" method.

Below is an example:

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    colors = TextFieldDefaults.outlinedTextFieldColors(
        unfocusedLabelColor = MaterialTheme.colors.primary
    )
)

On "outlinedTextFieldColors", you can define basically all of the colors you need in terms of a TextField state, as shown as below:

Creates a TextFieldColors that represents the default input text, background and content (including label, placeholder, leading and trailing icons) colors used in an OutlinedTextField.

@Composable
fun outlinedTextFieldColors(
    textColor: Color = LocalContentColor.current.copy(LocalContentAlpha.current),
    disabledTextColor: Color = textColor.copy(ContentAlpha.disabled),
    backgroundColor: Color = Color.Transparent,
    cursorColor: Color = MaterialTheme.colors.primary,
    errorCursorColor: Color = MaterialTheme.colors.error,
    focusedBorderColor: Color =
        MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
    unfocusedBorderColor: Color =
        MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),
    disabledBorderColor: Color = unfocusedBorderColor.copy(alpha = ContentAlpha.disabled),
    errorBorderColor: Color = MaterialTheme.colors.error,
    leadingIconColor: Color =
        MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
    disabledLeadingIconColor: Color = leadingIconColor.copy(alpha = ContentAlpha.disabled),
    errorLeadingIconColor: Color = leadingIconColor,
    trailingIconColor: Color =
        MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
    disabledTrailingIconColor: Color = trailingIconColor.copy(alpha = ContentAlpha.disabled),
    errorTrailingIconColor: Color = MaterialTheme.colors.error,
    focusedLabelColor: Color =
        MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
    unfocusedLabelColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
    disabledLabelColor: Color = unfocusedLabelColor.copy(ContentAlpha.disabled),
    errorLabelColor: Color = MaterialTheme.colors.error,
    placeholderColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
    disabledPlaceholderColor: Color = placeholderColor.copy(ContentAlpha.disabled)
)

I haven't been having any issue with Dark and Light themes with this implementation.

Thank you! I was having an issue where my OutlinedTextField was outlined as black when it had focus. This did the trick. — petestmart, Nov 17 '21 at 23:27

score -1 · Answer 4 · answered Feb 17 '23 at 08:32

Try the below solution

            OutlinedTextField(
            value = state.searchQuery,
            onValueChange = onValueChange,
            modifier = Modifier
                .padding(48.dp)
                .fillMaxWidth(),
            placeholder = {
                Text(
                    text = "Search...",
                    color = Color.White,
                    fontSize = MaterialTheme.typography.titleSmall.fontSize,
                    fontWeight = FontWeight.Bold
                )
            },
            colors = TextFieldDefaults.outlinedTextFieldColors(
                unfocusedLabelColor = MaterialTheme.colorScheme.inversePrimary,
                textColor = Color.White
            ),
            maxLines = 1,
            singleLine = true
        )

Jetpack Compose TextField text colour in dark mode

4 Answers4