CODEWITHSUNDEEP
android-jetpack-compose
dessalines
dessalines

Reputation: 7352

How to do muted / grayed text in jetpack compose?

This seems to exist in most UI frameworks, in a way that will work with both light and dark themes, but it seems to be absent here.

Currently I've resorted to doing:

val Muted = Color.LightGray

and importing that elsewhere, but it looks bad on light themes.

Any ideas?

Upvotes: 0

Views: 1142

Answers (2)

jpegoraro
jpegoraro

Reputation: 504

Compose has ContentAlpha.medium, that is used, as the name suggests, to display a color as muted.

I don't know if this is the most efficient way to do it, but I usually use it like this:

Text(
    text = myText,
    color = when {
        isEnabled -> MaterialTheme.colors.myColor
        else -> MaterialTheme.colors.myColor.copy(alpha = ContentAlpha.medium)
    }
)

You could abstract it into a extension field and add it to your themes file:

val Color.muted get() = this.copy(alpha = ContentAlpha.medium)

And use it like this:

color = when {
    isEnabled -> MaterialTheme.colors.myColor
    else -> MaterialTheme.colors.myColor.muted

Upvotes: 2

Jagarapu Sahruday
Jagarapu Sahruday

Reputation: 214

  1. Using Color.luminance() value of the background color and choose the Grayscale color of the text in case of dynamic theming.

  2. Using isSystemInDarkTheme() to pick color in combination with contentColorFor(), when we have fixed theming system,

Upvotes: 0

Related Questions