Jetpack Compose Material3主题背景色设置后显示异常问题咨询

原因1：动态颜色覆盖自定义配色方案 #

默认的Material3项目主题会在Android 12（API 31）及以上设备上启用动态颜色功能，此时系统会自动生成配色方案，完全忽略你在DarkColorScheme和LightColorScheme中定义的颜色值。

解决办法：
调用主题时关闭动态颜色：

PetCareComposeTheme(dynamicColor = false) {
    GetStarted()
}

或者直接修改Theme.kt中的主题定义，默认关闭动态颜色：

@Composable
fun PetCareComposeTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = false, // 禁用动态颜色
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme
    // 保留原有其他逻辑
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

原因2：使用Modifier.background设置TextButton背景的方式错误 #

Material3的TextButton组件有专属的containerColor参数用于设置背景，使用Modifier.background会导致层级问题——按钮的波纹效果、状态背景会覆盖你设置的颜色，或者无法跟随按钮的交互状态变化。

正确写法：
直接通过containerColor设置背景，同时配合contentColor确保文字与背景对比度：

TextButton(
    onClick = { /* 点击事件 */ },
    containerColor = MaterialTheme.colorScheme.background,
    shape = RoundedCornerShape(10.dp),
    contentColor = MaterialTheme.colorScheme.onBackground
) {
    Text("按钮文本")
}

可选排查：主题模式是否匹配预期 #

如果设备当前的深色/浅色模式和你测试的配色方案不匹配，也会显示错误颜色。可以强制指定主题模式验证：

PetCareComposeTheme(darkTheme = true, dynamicColor = false) {
    GetStarted()
}

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