CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-compose-textfieldandroid-jetpack-compose-material3
Fried Rice
Fried Rice

Reputation: 3713

Unexpected Text colour alpha in Jetpack Compose Material Theme

I discovered today that MaterialTheme applies an alpha to Text's colour. As you can see from the example attached, when I change the background colour, the text's colour appears to be different because it has a transparency value. I can force set a colour (Text(color = MaterialTheme.colors.onBackground, ....)) and this works correctly but I don't want to have to do this for every single Text.

Why does MaterialTheme do this? How do I override this behaviour?

Compose and Material Compose Material version: 1.2.1

@Preview
@Composable
private fun Preview_Playground() {
    MaterialTheme {
        Box(Modifier.background(Color.Green)) {
            Text("Test", fontWeight = FontWeight.ExtraBold, modifier = Modifier.alpha(1f))
        }
    }
}

enter image description here enter image description here

Upvotes: 7

Views: 1320

Answers (2)

Durgesh Kumar
Durgesh Kumar

Reputation: 1001

 Text(
              text = header,
                    modifier = Modifier.padding(start = 8.dp, top = 8.dp)
                        .background(
                            color = MaterialTheme.colorScheme.primary.copy(alpha = .7f),
                            shape = RoundedCornerShape(8.dp)
                        )
                        .clip(RoundedCornerShape(8.dp))
                        .padding(start = 8.dp, end = 8.dp, top = 4.dp, bottom = 4.dp),
                    fontWeight = FontWeight.ExtraBold,
                    fontSize = 14.sp,
                    fontFamily = displayFontFamily,
                    color = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 1f)
                )

We can use like this,i.e provide seperately alpha to background and text

Upvotes: 0

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363845

With M2 (androidx.compose.material) the color of the Text is defined by the color parameter or applying a TextStyle.
The default value is Color.Unspecified.
If color = Color.Unspecified and style has no color set, this will be LocalContentColor mixed with LocalContentAlpha.current.

In the Text.kt you can find:

val textColor = color.takeOrElse {
        style.color.takeOrElse {
            LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
        }
    }

With M3 (androidx.compose.material3) it doesn't happen since LocalContentColor.current is not mixed:

val textColor = color.takeOrElse {
    style.color.takeOrElse {
        LocalContentColor.current
    }
}

If you have to use M2, you can define a custom composable for your Text, or you can change the LocalContentAlpha in the theme for the whole application (not only the Text):

MaterialTheme(
    colors = colors,
    typography = Typography,
    shapes = Shapes
){

    CompositionLocalProvider(LocalContentAlpha provides 0.5f) {
        content()
    }
}

Upvotes: 6

Related Questions