Jetpack Compose深色模式下带阴影白色背景卡片变灰问题

我在开发Jetpack Compose项目时遇到一个问题：白色背景的Card组件，在深色模式下添加elevation（阴影）后，卡片背景会变成灰色。我已尝试将深色调色板的surface颜色设为白色，但问题仍未解决。

相关代码 #

Card组件代码 #

Card(
    modifier = modifier,
    shape = RoundedCornerShape(6.dp),
    elevation = 8.dp,
    backgroundColor = if (selected) MaterialTheme.colors.primary else MaterialTheme.colors.surface,
) {
    Text(
        title,
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.subtitle1,
        modifier = Modifier.padding(16.dp),
        color = if (selected) MaterialTheme.colors.onPrimary else MaterialTheme.colors.onSurface
    )
}

主题调色板配置 #

private val DarkColorPalette = darkColors(
    primary = Blue500,
    primaryVariant = Purple700,
    secondary = Teal200,

    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
)

private val LightColorPalette = lightColors(
    primary = Blue500,
    primaryVariant = Purple700,
    secondary = Teal200,

    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
)

显示效果 #

• 浅色模式（符合预期）：
• 深色模式（异常：带elevation时背景变灰）：
• 深色模式（正常：移除elevation后背景恢复白色）：

原因与解决方法 #

原因 #

Jetpack Compose在深色模式下，会为带有elevation的Surface（包括Card）自动添加阴影颜色叠加层，用来模拟光影深度。即使将surface设为白色，这个叠加层也会让卡片视觉上呈现灰色。

解决方法 #

通过CardDefaults.cardColors自定义卡片颜色配置，直接指定背景色并覆盖默认的颜色叠加逻辑：

Card(
    modifier = modifier,
    shape = RoundedCornerShape(6.dp),
    elevation = 8.dp,
    colors = CardDefaults.cardColors(
        backgroundColor = if (selected) MaterialTheme.colors.primary else MaterialTheme.colors.surface,
        contentColor = if (selected) MaterialTheme.colors.onPrimary else MaterialTheme.colors.onSurface
    )
) {
    Text(
        title,
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.subtitle1,
        modifier = Modifier.padding(16.dp),
        color = if (selected) MaterialTheme.colors.onPrimary else MaterialTheme.colors.onSurface
    )
}

这样设置后，Card的背景色会严格使用你指定的颜色，不会因elevation自动添加灰色叠加层，同时保留阴影效果。

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