Weird bug color text in dark mode compose

Question

Hi I'm new to compose and I'm trying to debug this weird text color bug

Color should be white and it's like a grey dark which seems to disappear and set white color once I scroll them out of sight and scroll back to the previous positions.

Pretty sure someone had this error before, am I missing something? Why does this error happen?

Edit: This only happens when my phone has dark mode activated. If I deactivate it and set false/true in TodoTheme(...) everything works as expected.

Most simple code to repro:

setContent {
    TodoTheme {
        TodoScreen()
    }
}

@Composable
fun TodoScreen(
) {
    val text = "This is a big text that will make color change and won't be very much visible for the user, why does this happen?"
    LazyColumn(){
        items(listOf(text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text,text)) { string ->
            Text(text = string, color = MaterialTheme.colors.onSurface)
        }
    }
}

Colors are the one by default (I don't think this is a color problem):

val LightThemeColors = lightColors(
    primary = Purple700,
    primaryVariant = Purple800,
    onPrimary = Color.White,
    secondary = Color.White,
    onSecondary = Color.Black,
    background = Color.White,
    onBackground = Color.Black,
    surface = Color.White,
    onSurface = Color.Black,
    error = Red800,
    onError = Color.White
)

val DarkThemeColors = darkColors(
    primary = Purple300,
    primaryVariant = Purple600,
    onPrimary = Color.Black,
    secondary = Color.Black,
    onSecondary = Color.White,
    background = Color.Black,
    onBackground = Color.White,
    surface = Color.Black,
    onSurface = Color.White,
    error = Red300,
    onError = Color.Black
)

Here's a video that you'll be able to watch exactly what's happening. This is on a Redmi Note 8 Pro. https://www.youtube.com/watch?v=MwVO62NXCQU

And the image:

Answer 1

EDIT:

<style name="AppTheme" parent="...">
    <!-- Customize your theme here. -->
    <item name="android:forceDarkAllowed" tools:targetApi="q">false</item>
</style>

You can add this line in the theme used for the application and it will not override the app in dark mode even when force dark mode is enabled

ORIGINAL ANSWER BELOW

If you are using a Redmi phone and only have this issue when dark mode is enabled in the phone, go to Settings -> Display -> More Dark Mode Options and then from the app list just uncheck your app to see if it works properly

But I am yet to find a solution for this thing turning on by default. I will update this answer once I find that too.