I'm building a design system and have a question a...

# compose

[Dmitry Strekha]

I'm building a design system and have a question about colors:
how to handle text colors?
In classic android we have android:textColor, android:textColorPrimary and android:textColorSecondary (plus some inverted versions) attributes.
In compose (and in Material in general) there are no special colors for text, but just colorOnX.
I see a few solutions here:
- create a custom theme which extends Material theme and add colorText and colorTextSecondary (plus versions for onPrimary).
- override LocalContentColor with primary text color and apply alpha to it when need a secondary version. Not sure if this may work, because the result color may not be the same as desired color.

What is the best solution?

[Zoltan Demant]

I don't know if it's the best solution, but the one I ended up with and have enjoyed using is a custom text composable - one of the properties being a "decoration": highlight (accent color), regular (white/black) and dim (grey, like text color secondary). I then use this text everywhere, if I need another text composable, this one is the one powering it.

[Dmitry Strekha]

How do you handle dark theme support? Do you have something like if (isLight) lightColor else darkColor in your Text composable? Does it scale to other themes beside liht/dark?

[Zoltan Demant]

It depends on the decoration, accent points to colors.primary from the material theme, regular/dim uses the current content-color (dim just converts it into a dimmed variant). It works great for light/dark but I can imagine that it would work just as well for other themes, you would just have to specify appropiate colors in the theme.

[Chris Sinco [G]]

In compose (and in Material in general) there are no special colors for text, but just colorOnX.

Yes that is intentional in the system. There are contentColors for text and icons, which is resolved with contentColorFor , which will look into the theme CompositionLocal context to find the right colors

[Chris Sinco [G]]

So there are text colors, but it’s not called out as such and more generally colors for content

[Chris Sinco [G]]

If there specific Compose hierarchies/trees in your app where you want to override the content colors from the MaterialTheme, you can do so with CompositionLocalProvider

CompositionLocalProvider(LocalContentColor provides Color.White) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        IconButton(onClick = { onDismiss() }) {
            Icon(
                imageVector = Icons.Default.Close,
                contentDescription = "Close action"
            )
        }
        Text(
            title,
            style = MaterialTheme.typography.h3
        )
    }
    IconButton(onClick = { }) {
        Icon(
            imageVector = Icons.Default.HelpOutline,
            contentDescription = "Help action"
        )
    }
}

[Chris Sinco [G]]

Code above produces this. You can see that the text and icon colors are white because otherwise they’d likely be black because my app has a light theme and assumes dark text on a light background

[Chris Sinco [G]]

If you want a full-blown custom design system that builds on the same APIs as MaterialTheme, do check out the Jetsnack sample: https://github.com/android/compose-samples/tree/main/Jetsnack

[Dmitry Strekha]

Thanks a lot! I'll take a look at the example