Hello I am sorry if I break some rules. But I have tryed to search for a solution both here, and with google. The solutions I find don't seem to work

I want to change the background color of a scaffold composable function in android jetpack compose

Here is my code. I simply don't understand how come when I run the app, the background color remains to be white, even i specify it to be my own custom color ?

As you can see i tryed to change it both with a modifier, and with the backgroundColor parameter.

Scaffold(
        modifier = Modifier
            .fillMaxSize()
            .background(AppColors.mOrangeOne),
        topBar = { TopBar() },
        floatingActionButton = { FAB() },
        backgroundColor = AppColors.mOrangeOne
    )

object AppColors {
    val mLightGray = Color(0xffb4b9cd)
    val mBlack = Color(0xff060814)
    val mOffWhite = Color(0xffeceeef)
    val mLightPurple = Color(0xff545a75)
    val mDarkPurple = Color(0xff262C49)
    val mOffDarkPurple = Color(0xFF22496B)
    val mLightBlue = Color(0xff127EEA)
    val mBrown = Color(0xff7f6749)
    val mBlue  = Color(0xff4b5f9e)
    val mOrange  = Color(0xFFFF9800)
    val mOrangeOne  = Color(0xffFFD54F)
    val mOrangeTwo  = Color(0xffFFCA28)
}

CodePudding user response：

Using the backgroundColor param works. But if Scaffold's content is defining a background, it will overlap the Scaffold background...

1. If you set the Surface color, but not set the Scaffold's backgroundColor nor content background like below...

setContent {
    YourAppTheme {
        Surface(
            modifier = Modifier.fillMaxSize(), color = Color.Red
        ) { 
            // ...
        }
    }
}

The background will be red.

2. If you set the Scaffold background but not set the content's background like below...

setContent {
    YourAppTheme {
        Surface(
            modifier = Modifier.fillMaxSize(), color = Color.Red
        ) {
            Scaffold(backgroundColor = Color.Blue) {
                //...
            }
        } 
    }
}

The background will be blue

3. Finally, if you set the content's background like below...

setContent {
    YourAppTheme {
        Surface(
            modifier = Modifier.fillMaxSize(), color = Color.Red
        ) {
            Scaffold(
                backgroundColor = Color.Blue
            ) {
                Box(
                    Modifier
                        .fillMaxSize()
                        .background(Color.Green)) {

                }
            }
        }
    }
}

You will have a green background.