Search code examples
androidandroid-compose-textfieldandroid-jetpack-compose-material3

Text color is incorrect in dark mode on real device


I'm writing a small app and I see a problem with Material3 Text color element in dark mode. I've tried to minimize the app as possible to reproduce it and I've project that reproduces the problem on github. The entire application kotlin code is in the MainActivity.kt file. Material theme used in the project is defined in Theme.kt file. There are specially various colors to make the issue more visible.

In the main activity there are several Text elements that belong to a Surface and are displayed only when infoDisplayed state variable is set to true. After the app is started and lower info button is pressed the text elements become visible. The text color should be blue as onPrimaryContainer color is defined for dark mode but it's not! For one of the texts element there is even direct declaration that the color should be blue as presented below:

Text(
  style = MaterialTheme.typography.bodyMedium,
  text = "A selection of ...",
  color = Color.Blue
)

And even this text doesn't have blue color.

However, when the app is open with those text displayed and then:

  1. Press home android button, so that the app hides
  2. Bring the app back to view (by pressing app's icon or pressing overview button and then the app.
  3. Now the app is visible again and all Text elements have blue color as expected!
  4. Press the Close this button in the app to hide informations
  5. Press inrofmation icon on the main screen
  6. Information are displayed again and again with unexpected color!

Few more information:

  • There is no problem when testing it on emulator in android studio.
  • There is no problem in light mode.
  • I'm seeing it on my dev device which is xiaomi mi9se with MIUI12.5.1 and android 11
  • I don't use dynamic colors
  • I think I've seen similar color issue on Button elements, but I don't have reproduction

Any hint what did I wrote incorrectly or maybe if it's bug in Android's compose? Any workarounds? If it's a problem with compose should it be reported somewhere?


Solution

  • Ok, so the reason why those text have strange color are the "More dark options" as described in @Kartik answer to the question: Weird bug color text in dark mode compose

    When I disable those options for my application then colors behave as expected.

    Update that it also worked programmatically

    It also works when I in code used both: the <item name="android:forceDarkAllowed" tools:targetApi="q">false</item> and the

    if(Build.VERSION.SDK_INT >= 29) {
       LocalView.current.isForceDarkAllowed = false
    }
    

    in theme.kt file.