CODEWITHSUNDEEP
androidandroid-jetpack-compose
Barrufet
Barrufet

Reputation: 683

Weird bug color text in dark mode compose

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: enter image description here

Upvotes: 7

Views: 3039

Answers (3)

Kartik
Kartik

Reputation: 788

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/Xiaomi 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.

Select Dark Mode From Settings

Select More Dark Mode Options

Find your app from the individual apps list and turn off the toggle

Upvotes: 16

Mahdi Zareei
Mahdi Zareei

Reputation: 2028

delete themes file in dark values, and remove the

<item name="colorPrimaryVariant">@color/red900</item>
<item name="colorOnPrimary">@color/anyColor</item>
<item name="colorSecondary">@color/anyColor</item>
<item name="colorSecondaryVariant">@color/anyColor</item>
<item name="colorOnSecondary">@color/anyColor</item>

these item colors from your themes file

Upvotes: 0

qr_3
qr_3

Reputation: 141

I'd try the following: Inside the TodoRow composable, instead of setting the background of the Row with the modifier, wrap the row in a Surface and do not set the text color. As the documentation states:

When setting the background color of any elements, prefer using a Surface to do this, as the Surface sets an appropriate content color. Be wary of direct Modifier.background() calls, which do not set an appropriate content color.

Does that help?

Upvotes: 0

Related Questions