'Can´t put the background in white on jetpack compose

I'm making a Login page on Jetpack compose. I'm using themes with MaterialTheme. When I choose the background colour as white, it shows me a dark grey colour. I can use all other colours, but if I use white, it is not working.

Here´s the code:

@Composable
fun LoginScreen() {
    ReportAppTheme(darkTheme = false){
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(color = MaterialTheme.colors.background),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceAround

        ){}

And this is my theme.kt

private val LightColorPalette = lightColors(
    primary = Main3,
    primaryVariant = Main1,
    onPrimary = white,
    secondary = Teal200,
    secondaryVariant = Teal_600,
    onSecondary = black,
    error = red_dark,
    background = white ,
    onError = red_light,
    onBackground = black,
    surface = white,
    onSurface = black
)


@Composable
fun ReportAppTheme(
    darkTheme: Boolean,
    content: @Composable () -> Unit,
) {
    MaterialTheme(
        colors = if(darkTheme) DarkColorPalette
        else LightColorPalette
    ) {
        content()
    }
}


Solution 1:[1]

I gave this a look and it shows white for me. Ran on a real device.

My only ideas are, your white is not defined as white or your actually in dark mode.

Solution 2:[2]

It's the elevation that change your color.

Try to add your composable function inside a surface like that

 Surface(
                modifier = Modifier.fillMaxSize(),
                elevation = 0.dp,
                color = MaterialTheme.colors.background
            )

You will see that the white will be white :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 badvok
Solution 2 Stefanoq21