How to change Jectpack Compose BasicTextField's text color?

Question

I'm trying to make a search bar using BasicTextField.
The default text color is black and I couldn't find any option to change the text color.
Also I need to change the text size, font and other attributes.

@Composable
fun MyBasicTextField(){
    var text by remember { mutableStateOf("Hello") }
    BasicTextField(
        value = text,
        onValueChange = {
            text = it
        },
        decorationBox = { ... },
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.DarkGray, CircleShape)
            .padding(10.dp)
    )
}

If this is not possible through BasicTextField, is there any other approach to create similar view?
I have tried TextField but there was several problems like removing label, height, background...

Answer 1

You need textStyle parameter. If you prefer using default text style, use LocalTextStyle:

BasicTextField(
    // ...
    textStyle = LocalTextStyle.current.copy(color = Color.White)
)

Or you can use one of material styles:

BasicTextField(
    // ...
    textStyle = MaterialTheme.typography.body1.copy(color = Color.White)
)

Answer 2

If you want to use your current Material theme's colors so that it adapts to light and dark themes, you need to use LocalContentColor.current as well.

val localStyle = LocalTextStyle.current
val mergedStyle = localStyle.merge(TextStyle(color = LocalContentColor.current))
BasicTextField(
    textStyle = mergedStyle,
    cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
)

You probably also want to change the color of your cursor brush from the default black one. After some digging, I found that TextField uses the primary color (at least for Material 3).