Text on Surface(color = MaterialTheme.colors.primary) is a little bit transparent by default. Can I make it 100% opaque for ALL Text composables?

user_2114744 0
Viewed 45

Text() composable draws text with some transparency on surfaces with primary color:

val Purple500 = Color(0xFF6200EE)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200
)


ColorsTestTheme {
    // A surface container using the 'background' color from the theme
    Surface(color = MaterialTheme.colors.primary) {
        Column {
            Text("Android", fontSize = 55.sp)
            Text("Android", color = Color.White, fontSize = 55.sp)
        }
    }
}

text on first line is not opaque

Can I make text 100% opaque for ALL Text() composables with some BUILT-IN API?

Usually I get design mockups with opaque text :)

I realize that I can implement my own composable like OpaqueText(<params>, @Composable () -> Unit) and use it to draw opaque text :). I'm just wondering if there is a way to configure something in compose in order to achieve the same result with built-in Text() composable.

android-jetpack-compose kotlin text
1 Answers

I believe it's a bug. I think LocalContentAlpha should be updated depending on current background according to Material guidelines. Currently it's only being set in MaterialTheme according to this:

Dark text on light backgrounds (shown here as #000000 on #FFFFFF) applies the following opacity levels: High-emphasis text has an opacity of 87%

As a tmp fix, to override this behaviour you can provide a LocalContentAlpha value with CompositionLocalProvider for part of your application, or you can embed it in your theme:

@Composable
fun ColorsTestTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkThemeColors
    } else {
        LightThemeColors
    }
    MaterialTheme(
        colors = colors,
        typography = typography,
        shapes = shapes,
    ) {
        CompositionLocalProvider(
            LocalContentAlpha provides 1f,
            content = content
        )
    }
}
user_35857960
Related