Jetpack Compose文本颜色预览与真机显示不一致问题排查

问题分析 #

核心冲突来自系统深色/浅色模式的主题适配逻辑：

• 预览默认启用浅色模式，主题自动配置文本颜色为黑色，和你设置的浅紫色背景（0xFFE9D7F7）对比正常；
• 真机开启了深色模式，主题会自动将文本颜色切换为白色以适配深色背景，但你给Surface硬设置了固定浅色背景，导致白色文本与浅色背景重叠，呈现出文本为白色的现象。

解决方案 #

方案1：跟随主题颜色适配（推荐）

放弃硬写固定背景色，改用主题提供的颜色变量，让背景和文本颜色自动跟随系统模式切换：

@Composable
fun TopHeader(totalPerPerson: Double = 0.0) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(150.dp)
            .clip(shape = RoundedCornerShape(corner = CornerSize(12.dp))),
        color = MaterialTheme.colors.surface // 替换为主题自带的surface颜色
    ) {
        // 其余代码保持不变
    }
}

如果希望浅紫色作为浅色模式的默认surface颜色，可在ui/theme/Theme.kt中修改浅色主题配置：

private val LightColorPalette = lightColors(
    surface = Color(0xFFE9D7F7),
    onSurface = Color.Black,
    // 其他颜色配置保留原样
)

方案2：手动指定文本颜色（需固定背景时使用）

若必须使用固定的浅紫色背景，给Text组件明确指定颜色，避免跟随主题自动切换：

Text(
    text = "Total Per Person",
    style = MaterialTheme.typography.h5,
    color = Color.Black // 或使用MaterialTheme.colors.onSurface，浅色模式下为黑色
)

Text(
    text = "$$total",
    style = MaterialTheme.typography.h4,
    fontWeight = FontWeight.ExtraBold,
    color = Color.Black
)

方案3：强制APP使用单一主题模式

如果想让APP始终保持浅色模式，可在MyApp中强制指定主题模式：

@Composable
fun MyApp(content: @Composable () -> Unit) {
    ComposableExmpTheme(
        darkTheme = false // 强制启用浅色主题
    ) {
        Surface(
            color = MaterialTheme.colors.background
        ) {
            content()
        }
    }
}

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