Status Bar Color Change in Compose Multiplatform

Question

I want to change the status bar color. I have tried some code in App.kt file MaterialTheme{ } But it's not affect on statusbar color.

I want to change the status bar color like the background of then login screen. And make sure it doesn't effect on ios also. I tried edgeToedge(). But it's hiding the status bar. I don't want to hide the status bar. Just wanna change the color in light mode or dark mode.

Halsted

Answer 1

I have solve the issue by doing this in MainAciviy.kt

enableEdgeToEdge(
            statusBarStyle = SystemBarStyle.light(
                Color.TRANSPARENT, Color.TRANSPARENT
            ),
            navigationBarStyle = SystemBarStyle.light(
                Color.TRANSPARENT, Color.TRANSPARENT
            )
        )

This in the ContentView.swift

ComposeView()
                        .ignoresSafeArea(edges: .all)
                        .ignoresSafeArea(.keyboard)

Then In CommonMain

Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color(0xFFEAFBF2))
                .windowInsetsPadding(WindowInsets.safeDrawing)
        ) {

          }

Halsted

I'm able to change the status bar and nav bar color for the screens that are outside of Scaffold. For the screens that are inside the scaffold, I cannot change color based on the current screen. How can I do that? I want to change the status bar and bottom nav bar color based on the current screen. My screens have different color for status bar and different color for bottom nav bar. By bottom nav bar I mean the system navigation bar. – Classis

That should be an accepted answer. I've been looking for it really hard. Thanks a lot! – Bellamy

@Niloy Sarker I am also facing the same issue. The answer is not clear about the CommonMain.. Can you please explain Where to write this Box code? We need to add that Box with Modifier in every @ Composable fun? – Amandy

You don't need the Box, you can either add a box or just add the modifier to your toplevel composable. But when I use a dark color the status bar text is also dark and becomes hard to see. How to change that? – Ventura