How to change the outline color of OutlinedTextField from jetpack compose?

Question

Here is how OutlinedTextField code looks like in jetpack-compose:

OutlinedTextField(
    value = "",
    onValueChange = {},
    label = {Text("Input")}
)

The default color of the outline of this TextField is purple. I want to change the outline color along with the label obviously.

Answer 1

The default values used by the OutlinedTextField are defined in the TextFieldDefaults.outlinedTextFieldColors by the focusedBorderColor, unfocusedBorderColor, disabledBorderColor.

With M2:

focusedBorderColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
unfocusedBorderColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),

You can change the colors.primary and the colors.onSurface in your theme.

With M3:

    focusedBorderColor: Color = OutlinedTextFieldTokens.FocusOutlineColor.toColor(),
    unfocusedBorderColor: Color = OutlinedTextFieldTokens.OutlineColor.toColor(),

In this case you can change the primary and the outline colors in your theme.

Otherwise you can override them using something like:

    OutlinedTextField(
        value = "",
        onValueChange = {},
        label = {Text("Input")},
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Green,
            unfocusedBorderColor = Yellow)
    )