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

For M3 it's containerColor:

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