Jetpack Compose预览背景色与主题背景色不一致问题排查

你的代码存在几个导致预览和运行时背景不一致的问题：

1. 颜色Scheme不完整 #

• 仅给LightColorScheme设置了background为红色，但DarkColorScheme未定义background属性，当系统切换到深色模式时，运行时会使用深色主题的默认背景色，和预览效果产生差异。
• LightColorScheme代码缺少闭合大括号，会引发编译错误。

2. 预览未适配多主题模式 #

默认的@Preview注解仅渲染浅色模式，若要让预览匹配系统的深色/浅色模式，或同时预览两种模式，需添加对应配置参数。

修复步骤 #

第一步：补全颜色Scheme代码 #

修改Theme.kt，给DarkColorScheme添加background，并补全LightColorScheme的闭合：

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80,
    background = Color.DarkGray // 替换为你需要的深色背景色
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    background = Color.Red
) // 补上缺失的大括号

第二步：让预览适配多主题模式 #

修改预览代码，添加深色模式的预览配置，或让预览跟随系统主题：

// 同时预览浅色和深色模式
@Preview(showBackground = true, name = "Light Mode")
@Preview(showBackground = true, name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun GreetingPreview() {
    PreviewTutorialTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Greeting("Android")
        }
    }
}

如果你的PreviewTutorialTheme函数未根据系统主题切换颜色Scheme，需确保主题函数正确处理darkTheme参数：

@Composable
fun PreviewTutorialTheme(
    darkTheme: Boolean = isSystemInDarkTheme(), // 默认跟随系统主题
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

修改完成后，预览会同步显示浅色和深色模式的效果，且颜色Scheme与运行时保持一致。

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