I'd like to have certain composables (let's name them Composable A and Composable B) have a specific status bar color. I've initially used Accompanist's system UI controller and

DisposableEffect

like this on my root Composables for A & B:

val systemUiController = rememberSystemUiController()
    DisposableEffect(systemUiController) {
        systemUiController.setStatusBarColor(SpecificColor)
        onDispose {
            systemUiController.setStatusBarColor(OriginalColor)
        }
    }

When entering Composable A, the status bar color is successfully set to the specific color, but when entering B, the original status bar color returns. I imagine it's because of the

onDispose

callback, but on my root composable for B, I have the same piece of code that sets the status bar color. Is there any other way of achieving this?

In examples I have used:

if (!LocalInspectionMode.current) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

And then using that code inside theme making sure only applies once.

I guess I should add that I'm using a custom theme and not the M3 MaterialTheme (I used this article and this one for reference), and the rest of the app still uses XML for UI. Our app doesn't use Material Design so that's why I decided to use a custom theme, though now I'm thinking of using the

MaterialTheme

so that I can at least change the status bar color without resorting to hacks. I'm also using ComposeViews inside Fragments

Above example is using custom theme, with my own colorScheme implementation 🙂 Not need any Material to call above code. Replace colorScheme.primary.toArgb() with SpecificColor or what color you want 🙂