CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpack-compose-material3android-compose-textfield
Andre
Andre

Reputation: 31

Why does my text change color in Jetpack Compose Android App?

I'm developing an app with Jetpack Compose, in the Theme.kt i have imported and overriden the primaryColor as it shows

private val LightColorScheme = lightColorScheme(
     primary = Primary
)

Below that I didnt support dynamic colors or light/dark schema as I just want a set of colors.

@Composable
fun MarkettrackerTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colorScheme = LightColorScheme,
        typography = MarketTrackerTypography,
        content = content
    )
}

Then I have my whole app surounded by the theme in MainActivity.kt where I then surround my MainScreen.kt that contains Scaffold with grey container color, navbar and other composables/screens. When I enter the app it shows a loading text, and for a fraction of a second it is black before it turns to white. Also, when some texts are out of composition they turn from black to white when I come back to them...

 setContent {
            MarkettrackerTheme {
                MainScreen(
                    onProductClick = {
                        NavigateAux.navigateTo<ProductDetailsActivity>(this)
                    }
                )
            }
        }

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    var selectedIndex by rememberSaveable { mutableIntStateOf(0) }

    Scaffold(
        containerColor = Grey,
        bottomBar = {
            // NavBar...
        }
    ) {
        NavHost(
            navController = navController,
            startDestination = Destination.HOME.route,
            enterTransition = { fadeIn(tween(400)) },
            exitTransition = { fadeOut(tween(200)) },
            modifier = Modifier.padding(it)
        ) {
            composable("home") {
               PullToRefreshLazyColumn(
        isRefreshing = isRefreshing,
        onRefresh = {
            scope.launch {
                // logic to refresh products...
            }
        }
    ) {
        if(isLoading) LoadingIcon()
        else LazyColumn(...)
      }
     }

The text that changes everytime is the LoadingIcon one:

 Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.mt_logo),
            contentDescription = "LoadingIcon",
            modifier = Modifier.rotate(rotation)
        )
        text?.let {
            Text(text = it) // this changes from black to white in almost 1s
        }
    }

Previews are good and my Android version is 10. My friend says the same does not happen is his phone, his android version is 11.

I've tried setting color on text hardcoded, using styles, surrounding the text with the Theme but nothing works, it shows black for a ms and then white.

Upvotes: 0

Views: 181

Answers (1)

Andre
Andre

Reputation: 31

FIXED

Turns out xiaomi phones force dark theme in apps so I added the following line to themes.xml:

<item name="android:forceDarkAllowed">false</item>

Upvotes: 0

Related Questions