[System UI Controller] Set system bar colors not working inside compose dialog

[joakimtall]

Code like the following works well outside of a dialog, but when showing a dialog it does nothing, even if run inside the dialog composable (to get the correct window ref)

val systemUiController = rememberSystemUiController()
SideEffect {
    systemUiController.setSystemBarsColor(Color.Green)
}

Steps to reproduce

Just show a compose Dialog and use system ui controller to change system bar colors

Here is a complete repro project: https://github.com/joakimtall/repro-dialog-bugs/tree/set-systembar-colors-does-nothing-in-compose-dialog

Repro project not showing dialog (bar color change works)

Repro project showing dialog (bar color is reset to some dialog default, even with system ui controller inside dialog)

[joakimtall]

Hmm I guess the bars are green but shaded like everything else? I didnt notice this with my attempt at full screen dialog

[Josh-Owen]

I seem to be having the same problem, I am needing to create a full-screen dialog that also updates the action bar colour in compose to white to match the background of the dialog. Did you manage to figure out a workaround for this?

[joakimtall]

No, the only workaround I have is to build a new navigation component with a custom full screen dialog system that does not use the compose dialog at all. A very heavy workaround.

We seem to have the exact same usecase

On Mon, 20 Mar 2023 at 13:28, Josh Owen @.***> wrote:

I seem to be having the same problem, I am needing to create a full-screen dialog that also updates the action bar colour in compose to white to match the background of the dialog. Did you manage to figure out a workaround for this?

— Reply to this email directly, view it on GitHub https://github.com/google/accompanist/issues/1535#issuecomment-1476138757, or unsubscribe https://github.com/notifications/unsubscribe-auth/A4HVPG2VCMSEUNVSQDATM73W5BEQPANCNFSM6AAAAAAVQCZ6OY . You are receiving this because you authored the thread.Message ID: @.***>

[alexvanyo]

The sample project has an example of usage in a Compose Dialog:

https://github.com/google/accompanist/blob/b179a13c131baad19cdc0167afd2efa0e004d593/sample/src/main/java/com/google/accompanist/sample/systemuicontroller/DialogSystemBarsColorSample.kt

That might be useful as a guide?

[joakimtall]

Wow, that actually works!

Things like this might be the secret 😮

// Update the light and dark status bar state for both the Activity's SystemUiController and
// the Dialog's. If we just updated the Dialog's things wouldn't work properly for unknown
// reasons.
LaunchedEffect(parentSystemUiController, statusBarDarkIcons, navigationBarDarkIcons) {
    systemUiController.statusBarDarkContentEnabled = statusBarDarkIcons
    systemUiController.navigationBarDarkContentEnabled = navigationBarDarkIcons
    parentSystemUiController.statusBarDarkContentEnabled = statusBarDarkIcons
    parentSystemUiController.navigationBarDarkContentEnabled = navigationBarDarkIcons
}

Thanks!

Maybe this should be more obvious or better documented but that would be another issue