Modal Bottom Sheet scrim color is not shown in status bar in Jetpack compose

Question

Migrating an app in view system to Jetpack compose.

The bottom sheet scrim color is shown on the status bar in the current app.
How to reproduce the same in Jetpack compose?

Screenshot of the app using views

Screenshot of the app using compose

Compose Code

val modalBottomSheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
)
val coroutineScope = rememberCoroutineScope()

ModalBottomSheetLayout(
    sheetState = modalBottomSheetState,
    sheetContent = {
        // Not relevant
    },
) {
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            // Not relevant
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    coroutineScope.launch {
                        if (!modalBottomSheetState.isAnimationRunning) {
                            if (modalBottomSheetState.isVisible) {
                                modalBottomSheetState.hide()
                            } else {
                                modalBottomSheetState.show()
                            }
                        }
                    }
                },
            ) {
                Icon(
                    imageVector = Icons.Rounded.Add,
                    contentDescription = "Add",
                )
            }
        },
        modifier = Modifier
            .fillMaxSize(),
    ) { innerPadding ->
        // Not relevant - Nav graph code
    }
}

Answer 1

If you are using Material3 you can provide the windowInsets to the ModalBottomSheet directly. You can either set them to 0 or keep which ones you prefer.

For example, if you only want the bottom insets to be maintained use this code:

ModalBottomSheet(
        sheetState = sheetState,
        onDismissRequest = {  },
        modifier = modifier,
        windowInsets = BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Bottom),
    ) {
        // Bottom sheet layout 
    }

Answer 2

try to use the System UI Controller in the accompanist library to control the statusBar Color and navigationBar color

implementation "com.google.accompanist:accompanist-systemuicontroller:0.18.0"

// Remember a SystemUiController
val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight

SideEffect {
    // Update all of the system bar colors to be transparent, and use
    // dark icons if we're in light theme
    systemUiController.setSystemBarsColor(
        color = Color.Transparent,
        darkIcons = useDarkIcons
    )

    // setStatusBarsColor() and setNavigationBarsColor() also exist
}