Change Status Bar Text Color in Jetpack Compose Material3

Question

I'm encountering an issue with my Android App built with Jetpack Compose. Despite searching for solutions, I haven't found correct answer for my problem yet.

In my app, during light mode, the text and icons (such as time, Wi-Fi, signal, etc.) appear in white, while in dark mode, they appear in black.

I aim to customize this behavior, such that during light mode, they display in Color.DarkGray, and during dark mode, they display in Color.LightGray.

Although I came across some code snippets in other questions, they are deprecated now.
Moreover, even if they were functional, it seems they only modify the status bar instead of the intended text and icons."
How to change status bar default text color in Android

fun MyTheme { 
            ...

            val systemUiController = rememberSystemUiController()
            val useDarkIcons = !isSystemInDarkTheme()

            SideEffect {
                systemUiController.setStatusBarColor(
                    color = Color(0xff655D8A),
                    darkIcons = !useDarkIcons
                )

            ... 
}

I am using Android Studio Giraffe

and here is my build.gradle app

...

android {
    namespace = "com.kumuda.jetweatherforecast"
    compileSdk = 34

    defaultConfig {
        applicationId = "com.kumuda.jetweatherforecast"
        minSdk = 32
        targetSdk = 33
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary = true
        }
    }

    buildTypes {
        release {
            isMinifyEnabled = false
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_17
        targetCompatibility = JavaVersion.VERSION_17
    }
    kotlinOptions {
        jvmTarget = "17"
    }
    buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.4.3"
    }
    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }
}

...

I want to change the color text of the status bar, anybody can help me?

Answer 1

You appear to be setting darkIcons to !useDarkIcons, which looks like the opposite of what you intend.

Try

SideEffect {
    systemUiController.setStatusBarColor(
        color = Color(0xff655D8A),
        darkIcons = useDarkIcons
    )