LocalContentAlpha

Property

Common
val LocalContentAlpha = compositionLocalOf { 1f }

CompositionLocal containing the preferred content alpha for a given position in the hierarchy. This alpha is used for text and iconography (Text and Icon) to emphasize / de-emphasize different parts of a component. See the Material guide on Text Legibility(https://material.io/design/color/text-legibility.html) for more information on alpha levels used by text and iconography.

See ContentAlpha for the default levels used by most Material components.

MaterialTheme sets this to ContentAlpha.high by default, as this is the default alpha for body text.

Code Examples

ContentAlphaSample

@Composable
fun ContentAlphaSample() {
    // Note the alpha values listed below are the values for light theme. The values are slightly
    // different in dark theme to provide proper contrast against the background.
    Column {
        Text(
            "No content alpha applied - uses the default content alpha set by MaterialTheme - " +
                "87% alpha"
        )
        CompositionLocalProvider(LocalContentAlpha provides 1.00f) {
            Text("1.00f alpha applied - 100% alpha")
        }
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
            Text("High content alpha applied - 87% alpha")
        }
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
            Text("Medium content alpha applied - 60% alpha")
        }
        CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
            Text("Disabled content alpha applied - 38% alpha")
        }
    }
}