Jetpack Compose status bar color not updated in Dark Theme

Question

I want to set different colors for dark theme and light theme. Everything works fine except status bar color.

In dark theme -> my status bar color not updated.

My theme :

private val DarkColorPalette = darkColors(
    primary = Color.Black,
    primaryVariant = Color.Black,
    secondary = Color.LightGray
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200
)

My output in Dark theme:

Edit:

I already saw this answer - how to change statusbar color in jetpack compose?

They recommend to use the library. I don't want to use any 3rd party library.

Edit 2:

my manifest file

   <activity
        android:name=".ActivityTextStyles"
        android:exported="true"
        android:label="@string/app_name"
        android:theme="@style/Theme.ComposeText.NoActionBar" />

Does this answer your question? [how to change statusbar color in jetpack compose?](https://stackoverflow.com/questions/65610216/how-to-change-statusbar-color-in-jetpack-compose) — Phil Dukhov, Aug 30 '21 at 07:04
@PhilipDukhov they recommend 3rd party library. For status bar color alone I need to use library ?? — Ranjithkumar, Aug 30 '21 at 07:08
Yes, it's made by google too. They just decided that it shouldn't be inside compose itself for some reasons. — Phil Dukhov, Aug 30 '21 at 07:17
So you use the default theme from sdk or are you overriding it in the `themes.xml`? — Bartek Lipinski, Aug 30 '21 at 12:19
@BartekLipinski I updated my Manifest code in my question. can you verify? — Ranjithkumar, Sep 01 '21 at 06:19

Eaweb · Answer 1 · 2022-01-23T11:57:09.967

8

Here's what I discovered when I faced this same issue and decided to look deeper for the cause.

Turns out, out of the box, my Compose project reads the value for status bar color from the themes.xml file in res/values. The value is set using colorPrimaryVariant. Updating that value to a new color changed the color of the status bar.

Overall, I will recommend updating the values of themes.xml and colors.xml to the custom colors you wish to use for your project.

edited Jan 23 '22 at 11:57

answered Dec 02 '21 at 13:21

Eaweb

811
1
12
16

good catch. I will try – Ranjithkumar Dec 07 '21 at 16:18

score 6 · Accepted Answer · answered Sep 16 '21 at 11:07

I was able to set status bar color with this one line code in onCreate()

  this.window.statusBarColor = ContextCompat.getColor(this,R.color.black)

My code:

    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      
            this.window.statusBarColor = ContextCompat.getColor(this,R.color.black)
            //your composables
         }
     }

score 2 · Answer 3 · answered Oct 23 '22 at 18:26

In my case, the color of the top bar was the only one overwritten in the themes.xml file generated when creating the project in Android Studio.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.MyApp" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">@color/purple_700</item>
    </style>
</resources>

It can be modified there.

Jetpack Compose status bar color not updated in Dark Theme

3 Answers3