Jetpack Compose深色模式下TextField/OutlinedTextField文字颜色适配问题求助

核心结论 #

你遇到的既不是组件使用错误，也不是需要自行遍历所有Typography样式做适配的长期缺陷，核心成因分为两类：

• 自定义主题的颜色配置漏项
• 所使用的早期Compose Material库版本的已知实现缺陷

具体成因拆解 #

1. 组件的颜色读取逻辑和Typography的优先级关系
   你观察到的"输入框默认文本样式为MaterialTheme.typography.body1"仅指排版层面的尺寸、字重、行高配置，输入框的实际文本颜色优先级远高于Typography自身携带的color属性：按照Material规范，输入框的已输入文本颜色默认直接读取MaterialTheme.colors.onSurface值。
   很多开发者自定义主题时，往往只配置了primary、background、error等零散颜色，漏写onSurface的对应值，导致组件在深色模式下没有拿到正确的浅色文本值，最终fallback到硬编码的黑色。这种场景下会出现非常典型的现象：标签、占位提示、输入框边框都可以正常随深色模式适配（因为这些元素使用的是onSurface的不同透明度派生值，依赖的基础配置正常），唯独已输入的文本永远为黑色。
2. 早期版本的实现缺陷
   在Compose正式发布前的alpha/beta阶段，TextField/OutlinedTextField确实存在过已知bug：已输入文本的读取逻辑错误地跳过了Material颜色层，直接读取Typography上的硬编码颜色值。你之前写的临时hack（修改body1的color为白色）之所以生效，正是适配了这个错误的实现逻辑。

正确的修复方案，无需全局遍历Typography修改 #

1. 优先补全自定义主题的颜色配置，明确指定明暗模式下的onSurface值
   标准的自定义主题颜色定义结构参考：

   // 深色模式颜色配置
   private val DarkColorScheme = darkColors(
       primary = Color(0xFFBB86FC),
       secondary = Color(0xFF03DAC6),
       background = Color(0xFF121212),
       surface = Color(0xFF121212),
       // 核心补全项：明确指定输入框文本依赖的基础颜色
       onSurface = Color.White,
       error = Color(0xFFCF6679)
   )
   
   // 浅色模式颜色配置
   private val LightColorScheme = lightColors(
       primary = Color(0xFF6200EE),
       secondary = Color(0xFF03DAC6),
       background = Color.White,
       surface = Color.White,
       onSurface = Color.Black,
       error = Color(0xFFB00020)
   )
   

2. 升级到正式版Compose Material库，修复早期版本的逻辑错误
   正式发布后的版本已经修正了输入框文本颜色的读取逻辑，不再依赖Typography上的硬编码颜色，会正确跟随Material颜色层的配置自动适配明暗模式。
3. 局部场景的兜底方案
   如果需要在不升级版本的场景下修复问题，不需要全局修改Typography，可以直接在单个输入框上显式指定输入文本颜色，避免全局改动带来的连锁影响：

   OutlinedTextField(
       value = value,
       onValueChange = onValueChange,
       // 显式指定输入文本颜色，替代全局修改Typography的方案
       textStyle = LocalTextStyle.current.copy(color = MaterialTheme.colors.onSurface),
       modifier = Modifier.fillMaxWidth(),
       label = { Text("Username") },
       isError = isError,
       trailingIcon = {
           ClearIcon(
               visible = value.isNotEmpty(),
               onClick = { onValueChange("") }
           )
       }
   )
   

补充说明：你之前使用的全局修改body1颜色的方案属于临时hack。按照Compose的设计规范，Typography的职责仅为定义排版相关的尺寸、字重、行高，文本颜色适配属于独立的Material颜色层逻辑，框架本身不会为每个Typography样式单独维护明暗模式的颜色配置，这也是这类适配不需要自行遍历所有排版样式的核心原因。

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