If I want the text color be different for light and dark mode, should I replace my typography for bo...

# compose

[Aram Sheroyan]

If I want the text color be different for light and dark mode, should I replace my typography for both modes like it is done for colors, or there is a way to just reference theme's color so it changes automatically? I was thinking that I could do something like this

@Immutable
data class CustomTypography(
    val title_s: TextStyle = TextStyle(fontSize = 32.sp, color = CustomTheme.colors.customPrymaryColor)
)

but it says that Composable invocations can only happen from the context of composable function

[Casey Brooks]

You can mark the property getter as `@Composable`:

val title_s: TextStyle @Composable get() = ...

[Albert Chang]

You don't need to set the color of text styles in your global theme. The default text color comes from LocalContentColor, and material components like Surface and Scaffold will automatically set LocalContentColor to the appropriate color in your theme.

[Albert Chang]

You just need to change the onBackground or onSurface colors of your theme.

[Aram Sheroyan]

@Albert Chang We are using a custom theme that is not similar to material at all and different text styles have different colors for both light and dark modes. In this case what would be the best approach to make it work?

[Albert Chang]

In material content (including text) color depends on the background color. Do you mean that in your design system text always has a fixed color regardless of background color?

[Aram Sheroyan]

We have a custom color system along with custom typography and none of them resembles the material system. Our text colors are different for light/dark modes, but they are different depending on the style too. I was thinking of setting the colors for each style in typography, so we can just use the appropriate style while adding a text. And since styles will use the colors from the theme, they will change automatically

[Albert Chang]

OK in that case I would recommend using two Typography objects. For the second approach, you can use extension functions like this:

val CustomTheme.title_s: TextStyle
    @Composable get() = typography.title_s.copy(color = colors.primary)

However this will create an extra TextStyle object for every Text component. I would avoid that for such a common component.