Lilly
01/05/2022, 1:24 PMTextFieldColors
to apply the color for onSecondary
instead of onPrimary
. I tried with TextStyle.color
or wrapping it in a Surface and setting contentColor but nothing works. The text/label/indicator color is always black. My onSecodary
color is white.
Column(modifier = Modifier.padding(8.dp)) {
TextField(
modifier = Modifier.fillMaxWidth(),
value = password,
onValueChange = { password = it },
label = { Text("Password") },
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
)
}
Any ideas?Bradleycorn
01/05/2022, 3:52 PM@Composable
fun ThemedTextField(
label: String,
modifier: Modifier = Modifier,
textFilter: (String, String) -> String = {_, new -> new },
backgroundColor: Color = MaterialTheme.colors.primary,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
visualTransformation: VisualTransformation = VisualTransformation.None,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }) {
val contentColor = contentColorFor(backgroundColor = backgroundColor)
// Many of these values are the same as the default, just using contentColor instead
// of the default text field color.
val colors = TextFieldDefaults.textFieldColors(
textColor = contentColor,
backgroundColor = backgroundColor,
cursorColor = contentColor,
focusedIndicatorColor = contentColor.copy(alpha = ContentAlpha.high),
unfocusedIndicatorColor = contentColor.copy(alpha = TextFieldDefaults.UnfocusedIndicatorLineOpacity),
leadingIconColor = contentColor.copy(alpha = TextFieldDefaults.IconOpacity),
trailingIconColor = contentColor.copy(alpha = TextFieldDefaults.IconOpacity),
focusedLabelColor = contentColor.copy(alpha = ContentAlpha.high),
unfocusedLabelColor = contentColor.copy(alpha = ContentAlpha.medium),
placeholderColor = contentColor.copy(alpha = ContentAlpha.medium)
)
TextField(
label = { Text(text = label, style = MaterialTheme.typography.body1, maxLines = 1) },
maxLines = maxLines,
singleLine = maxLines == 1,
shape = RectangleShape,
colors = colors,
interactionSource = interactionSource,
keyboardOptions = keyboardOptions,
visualTransformation = visualTransformation,
modifier = modifier
)
}
Lilly
01/05/2022, 4:27 PMBradleycorn
01/05/2022, 5:31 PM// Just set the text and cursor color, and use material defaults for everything else
val myColors = TextFieldDefaults.textFieldColor(textColor = Color.Red, cursorColor = Color.Blue)
TextField(colors = myColors)
Lilly
01/05/2022, 5:32 PMMyTheme() {
Surface(
color = MaterialTheme.colors.secondary,
contentColor = MaterialTheme.colors.contentColorFor(MaterialTheme.colors.secondary)
) {
var text by remember { mutableStateOf("") }
TextField(
modifier = Modifier.fillMaxWidth(),
value = text,
onValueChange = { text = it },
label = { Text("Username") }
)
}
}
It seems the TextField composable is immune against theming. I might file a bug?Bradleycorn
01/05/2022, 5:37 PMBasicTextField
composable”
In our case, we want everything the material text field provides, just with some different coloring, so it was easiest to just create and pass in the color scheme that we wanted.Lilly
01/05/2022, 5:39 PMBradleycorn
01/05/2022, 5:40 PMTextField
.. if it was going to use the LocalContentColor
to build itself, which color does it use for that? The text? the cursor? the indicator (outline/underline)? Whichever color it uses LocalContentColor for, what does it set the OTHER colors to? There’s no way to know.
So, they probably just said, “let’s stick with the material guideline colors”, and if the dev wants to use different colors, we’ll expose a colors property they can set.textColor
. Here’s the defaults:
fun textFieldColors(
textColor: Color = LocalContentColor.current.copy(LocalContentAlpha.current),
disabledTextColor: Color = textColor.copy(ContentAlpha.disabled),
backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = BackgroundOpacity),
cursorColor: Color = MaterialTheme.colors.primary,
errorCursorColor: Color = MaterialTheme.colors.error,
focusedIndicatorColor: Color =
MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
unfocusedIndicatorColor: Color =
MaterialTheme.colors.onSurface.copy(alpha = UnfocusedIndicatorLineOpacity),
disabledIndicatorColor: Color = unfocusedIndicatorColor.copy(alpha = ContentAlpha.disabled),
errorIndicatorColor: 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)
)
Lilly
01/05/2022, 5:47 PMBradleycorn
01/05/2022, 5:52 PM@Composable
fun MaterialTheme.textFieldColors(baseColor: Color): TextFieldColors = TextFieldDefaults.textFieldColors(
.. set the colors you want here ...
)
Lilly
01/05/2022, 6:55 PMLocalContentColor
or via TextStyle
, so not an appropriate solution.Bradleycorn
01/05/2022, 8:25 PMColton Idle
01/06/2022, 3:13 AM