Hi everyone, I'm experiencing an issue where the i...

# compose

[Dekroo]

Hi everyone,
I'm experiencing an issue where the initial text color in my app isn’t applied correctly - it shows wrong colors at first but changes to the expected black after I minimize and reopen the app. Has anyone encountered this kind of problem before? Any ideas on why this happens and how to fix it?

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable() () -> Unit
) {
  val colorScheme = when {
      dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
          val context = LocalContext.current
          if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
      }

      darkTheme -> darkScheme
      else -> lightScheme
  }

  MaterialTheme(
    colorScheme = colorScheme,
    typography = AppTypography,
    content = content
  )
}
--------------- 
Text(
     text = qrCode,
     modifier = modifier,
     style = MaterialTheme.typography.bodyMedium,
     color = MaterialTheme.colorScheme.onSurface
)

[Dekroo]

Also it seems that the problem is only with Black color... When hardcoding Color it loads normally (not black tho).

[Bogdan Vladoiu Lbs]

you could try this:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Set the default night mode based on system settings or your preference
        // This ensures isSystemInDarkTheme() in Compose is correctly initialized
        AppCompatDelegate.setDefaultNightMode(
            if (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES) {
                AppCompatDelegate.MODE_NIGHT_YES
            } else {
                AppCompatDelegate.MODE_NIGHT_NO
            }
        )

        setContent {
            AppTheme(
                darkTheme = isSystemInDarkTheme(), // This now reflects the correctly set mode
                dynamicColor = true,
                content = {
                    Text(
                        text = "Your QR Code Text Here", // Example text
                        // ... your existing modifiers
                        color = MaterialTheme.colorScheme.onSurface
                    )
                }
            )
        }
    }
}

[Dekroo]

It doesn't seem to work 😞
I also tried to set the background on element to see if theme is loading correctly, and yes it's instant compared to Text color, which changes only when minimizing and opening again

[Bogdan Vladoiu Lbs]

bummer, one last thing:

If AppCompatDelegate.setDefaultNightMode() doesn't resolve the initial text color issue, and it's specifically MaterialTheme.colorScheme.onSurface on a Text composable, the problem might be a very specific timing or a subtle interaction with how your AppTheme defines lightScheme and darkScheme.
Since you've confirmed it's only the text color, and it fixes on minimizing/reopening, this points to the colorScheme being evaluated incorrectly at the very first composition, then correcting itself when the UI is rebuilt.

Ensure isSystemInDarkTheme() is stable: While AppCompatDelegate.setDefaultNightMode() helps, sometimes the system's Configuration isn't fully propagated to LocalConfiguration.current (which isSystemInDarkTheme() uses) for the very first frame.
A robust way to get the current system dark mode, ensuring it's stable, is to use LocalConfiguration.current.uiMode and Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES.
Modify your AppTheme like this:

@Composable
fun AppTheme(
    // Pass it explicitly from Activity if not already doing so
    // or ensure it's derived from a stable source
    darkTheme: Boolean = (LocalConfiguration.current.uiMode and Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES,
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
  val colorScheme = when {
      dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
          val context = LocalContext.current
          if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
      }
      darkTheme -> darkScheme
      else -> lightScheme
  }

  MaterialTheme(
    colorScheme = colorScheme,
    typography = AppTypography,
    content = content
  )
}

[Bogdan Vladoiu Lbs]

hope this helps. if not i'm clueless 🫠

[Dekroo]

Hm, seems not to work 😞
Im wondering if it could be a problem with my phone and how it makes Dark theme on phone.
Anyways Ty for help, it was still interesting to see the approach you created 🙂

[Bogdan Vladoiu Lbs]

its not impossible. some phones really do have some funky defaults when it comes to themes/colours

[Bogdan Vladoiu Lbs]

it happened to me a lot when dealing with the old themes/xml uis