深色模式下BasicTextField光标颜色仍为黑色，如何修改？

• 使用OutlinedTextField或TextField时，无法缩小组件自带的过大内边距，因此改用内边距更小的BasicTextField
• 切换到BasicTextField后，深色背景下光标默认显示为黑色，与背景冲突导致不可见；尝试通过CompositionLocalProvider配置LocalTextSelectionColors，但光标颜色问题仍未解决
• 查看BasicTextField源码后发现，其cursorBrush参数默认硬编码为黑色，不会跟随主题配置自动变化

要解决光标和文本选中不可见的问题，需要分别处理光标颜色和文本选中样式：

1. 显式设置光标颜色：直接给BasicTextField的cursorBrush参数指定适配主题的颜色，因为该参数默认不会继承主题配置
2. 配置文本选中样式：通过CompositionLocalProvider设置LocalTextSelectionColors，确保选中区域的背景色和手柄颜色在深浅主题下都可见

完整示例代码 #

// 定义适配主题的文本选中颜色
val textSelectionColors = TextSelectionColors(
    handleColor = MaterialTheme.colors.onBackground.copy(alpha = 0.8f),
    backgroundColor = MaterialTheme.colors.onBackground.copy(alpha = 0.2f)
)

CompositionLocalProvider(LocalTextSelectionColors provides textSelectionColors) {
    BasicTextField(
        modifier = modifier,
        value = value,
        keyboardActions = keyboardActions,
        keyboardOptions = keyboardOptions,
        onValueChange = onValueChange,
        // 确保文本颜色适配当前主题背景
        textStyle = textStyle.copy(color = MaterialTheme.colors.onBackground),
        // 显式设置光标颜色，跟随主题的onBackground色值
        cursorBrush = SolidColor(MaterialTheme.colors.onBackground),
        decorationBox = { innerTextField ->
            if (value.isEmpty()) {
                // 占位符颜色也适配主题
                Text(
                    text = "请输入内容",
                    color = MaterialTheme.colors.onBackground.copy(alpha = 0.6f)
                )
            }
            innerTextField()
        }
    )
}

说明 #

• cursorBrush参数必须显式设置，因为源码中默认值为黑色硬编码，不会自动继承主题颜色；使用MaterialTheme.colors.onBackground可自动适配深浅主题，确保光标与背景有足够对比度
• LocalTextSelectionColors用于控制文本选中区域的背景色和选中手柄的颜色，设置后可解决选中内容不可见的问题
• 文本颜色和占位符颜色建议同步使用主题中的onBackground色值，保证在任何主题模式下都有良好的可读性

内容的提问来源于stack exchange，提问作者Magician