https://kotlinlang.org logo
#compose
Title
# compose
a

Aram Sheroyan

10/19/2021, 11:51 PM
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
Copy code
@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
c

Casey Brooks

10/20/2021, 12:18 AM
You can mark the property getter as `@Composable`:
Copy code
val title_s: TextStyle @Composable get() = ...
a

Albert Chang

10/20/2021, 12:22 AM
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.
You just need to change the
onBackground
or
onSurface
colors of your theme.
a

Aram Sheroyan

10/20/2021, 12:26 AM
@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?
a

Albert Chang

10/20/2021, 12:30 AM
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?
a

Aram Sheroyan

10/20/2021, 12:42 AM
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
a

Albert Chang

10/20/2021, 2:24 AM
OK in that case I would recommend using two
Typography
objects. For the second approach, you can use extension functions like this:
Copy code
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.