JetpackCompose Button Text color issue in both dark and light modes

Question

I'm new to mobile developmet and write my very first own program. I make simple calculator app that changes its colors if you change your phone mode. Everything seems to work fine but one thing, when I click "AC" button that changes to "C", after some numbers were inserted already, the text of this button changes to white even though my phone is in dark mode and hence it should be black. Here is my MainActivity

setContent {
            CalculatorTheme  {
                Surface {
                    val context = LocalContext.current
                    CalcApp(viewModel, context = context)
                }
            }
        }

Here is my CalcApp function right until this button:

@SuppressLint("MutableCollectionMutableState", "CoroutineCreationDuringComposition")
@Composable
fun CalcApp(
    viewModel: viewModel,
    context: Context,
) {

    val scope = rememberCoroutineScope()
    var currentValue by rememberSaveable {
        mutableStateOf("")
    }
    var timesClicked by rememberSaveable {
        mutableIntStateOf(0)
    }



    fun getTextAC (length: Int): String{
        return if (length != 0){
            "C"
        } else {
            "AC"
        }
    }



        Column () {
            Spacer(modifier = Modifier.weight(9f))
            Text(
                fontWeight = FontWeight.W300,
                maxLines = 1,
                color = MaterialTheme.colorScheme.primary,
                text = currentValue,
                fontSize = getFontSize(timesClicked),
                modifier = Modifier
                    .align(Alignment.End)
                    .padding(end = 10.dp, start = 10.dp)
            )
            Row (
                modifier = Modifier
                    .padding(start = 6.dp)
            ) {
                Column (
                    modifier = Modifier.padding(start = 7.5.dp)
                ) {
                    Row {
                        Column () {
                            Button(
                                contentPadding = PaddingValues.Absolute(),
                                colors = ButtonDefaults.outlinedButtonColors(
                                    containerColor = MaterialTheme.colorScheme.tertiaryContainer
                                 )
                                onClick = {
                                    currentValue = ""
                                    timesClicked = 0
                                },
                                modifier = Modifier
                                    .size(80.dp)
                            // Toggle enabled state based on acIsPressed
                            ) {
                                Text(
                                    maxLines = 1,
                                    text = getTextAC(currentValue.length),
                                    fontWeight = FontWeight.W300,
                                    fontSize = 40.sp,
                                    color = LocalContentColor.current
                                )
                            }
                            Spacer(modifier = Modifier.height(15.dp))
                        }
                        Spacer(modifier = Modifier.width(15.dp))
                    }

And here is my Theme:

private val DarkColorScheme = darkColorScheme(
    background = Color.Black,
    onBackground = Color.White,
    primary = Color.White,
    primaryContainer = Color.DarkGray,
    secondary = Color.White,
    secondaryContainer = Color(0xFFEB9828),
    tertiary = Color.Black,
    tertiaryContainer = Color.LightGray,

)

private val LightColorScheme = lightColorScheme(
    background = Color.White,
    onBackground = Color.Black,
    primary = Color.Black,
    primaryContainer = Color.LightGray,
    secondary = Color.Black,
    secondaryContainer = Color(0xFFE69339),
    tertiary = Color.White,
    tertiaryContainer = Color.Gray,
    )

@Composable
fun CalculatorTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    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 -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

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

I've already tried to set colors using viewModel, which should update colors depending on phone mode and after each change, I tried to set these colors using the theme, but every time I press "AC" button text color is messed up on this button and if I change mode to light trying to fix this my other colors mess up together with it.

Small update: It works fine on newer android versions. Have problem explicitly with older one.

Answer 1

It seems like you are using a combination of Jetpack Compose and the Material3 library for your calculator app. Instead of handling the button colors directly in the button, you can try using the Modifier.background property to set the background color based on the theme.

Try like this:

Button(
    onClick = {
        currentValue = ""
        timesClicked = 0
    },
    modifier = Modifier
        .size(80.dp)
        .background(MaterialTheme.colorScheme.tertiaryContainer)
) {
    Text(
        maxLines = 1,
        text = getTextAC(currentValue.length),
        fontWeight = FontWeight.W300,
        fontSize = 40.sp,
        color = MaterialTheme.colorScheme.primary
    )
}