App/Scaffold white background changing issue in Jetpack Compose

Question

Can anyone please point me out how to change this white background color of the app? Setting a color or background color on the Surface is having no impact. I've set the cyan background for the content inside the Scaffold just to debug the issue.

class MainActivity : ComponentActivity() {
        ...
        setContent {
            ChakkarTheme {
                Surface(
                    color = Color.Red, modifier = Modifier
                        .fillMaxSize()
                        .background(Color.DarkGray)
                ) {
                    ChakkarApp()
                }
            ...

@Composable
fun ChakkarApp() {
    Scaffold(
        topBar = { TopAppBar(title = { Text(appTitle) }, navigationIcon = navigationIcon) },
        floatingActionButtonPosition = FabPosition.End,
        floatingActionButton = {
            if (showFab) {
                FloatingActionButton(onClick = { /*TODO*/ }) {
                    Icon(imageVector = Icons.Filled.Add, contentDescription = null)
                }
            }
        },
        bottomBar = {
            BottomNavigation() {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination
                bottomNavItems.forEach { screen ->
                    BottomNavigationItem(
                        icon = { Icon(imageVector = screen.icon, contentDescription = null) },
                        label = { Text(stringResource(id = screen.resourceId)) },
                        selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
                        onClick = {
                            navController.navigate(screen.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    )
                }
            }
        }
    ) { paddingValues ->

        Column(
            modifier = Modifier
                .verticalScroll(rememberScrollState())
                .background(Color.Cyan)
                .padding(paddingValues)
                .padding(16.dp)
        ) {
            NavHost(
                navController = navController,
                startDestination = Screen.Running.route
            ) {
...

Thanks for your help!

Answer 1

The default background color of Scaffold is MaterialTheme.colors.background.

You can specify a custom value:

Scaffold(
    ...
    backgroundColor = Color.DarkGray,
)

Answer 2

Could you try add modifier = Modifier.fillMaxSize().background(color = Color.Black) or backgroundColor = Color.Black in your Scaffold?

+ Edit: add Modifier is not working. Try to add backgroundColor in your Scaffold.

Like this:

MaterialTheme {
    Scaffold(
        content = {
            Box(modifier = Modifier.size(500.dp).background(color = Color.Cyan))
        },
        backgroundColor = Color.Black
    )
}

Answer 3

From the below code snippet set full background color Modifier.fillMaxSize() It gives a full height and width. Modifier.background(Color.Grey) By usging background can set a background color.

Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Grey)
) {
    Column(
        modifier = Modifier
            .verticalScroll(
                state = rememberScrollState()
            )
    ) {
        Text(
            text = profileViewModel.loginUserDetail.lastName,
            fontSize = 18.sp,
            color = Color.White,
            fontFamily = myFontFamily,
            fontWeight = FontWeight.SemiBold,
            modifier = Modifier.padding(5.dp, 5.dp, 5.dp, 5.dp),
        )
    }
}