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.
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)
)