CODEWITHSUNDEEP
androidmaterial-designandroid-jetpack-compose
galihif
galihif

Reputation: 444

White background card turns gray with elevation in dark mode in Jetpack Compose

I am currently working on a Jetpack Compose project and I have a card with a white background. However, when I add elevation to the card, the background color turns to gray in dark mode. I have already tried to override the surface color of the dark color palette with white, but it still doesn't work.

Here's the code for my card with elevation 8 dp:

    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
        )
    }

this is on light mode (the expectation):

enter image description here

And here's what it looks like in dark mode:

enter image description here

in dark mode when I remove elevation, the background turns to white as it should be:

enter image description here

Here's my color palette on theme. I use the same color palette for dark and light:


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,
)

Upvotes: 0

Views: 1500

Answers (1)

BleedThemWhite
BleedThemWhite

Reputation: 89

After reading comments under you question I noticeid that you want to not have dark theme at all, so I might have a solution for that:
In your Theme.kt which should be under ui.theme package where your MainActivity is you should have something like: 

@Composable
fun YourCoolApp(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorScheme
    } else {
        LightColorScheme
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

Just change this if to

val colors = if (darkTheme) {
    LightColorScheme
} else {
    LightColorScheme
}

Note: I'm just starting to learn native android with kotlin, so i don't know if my answer would be helpful if you use Java. If that's the case i suggest asking for help in the comments here or investigating it yourself based on my answer.

Upvotes: 1

Related Questions