a

    Aram Sheroyan

    11 months ago
    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
    c

    Casey Brooks

    11 months ago
    You can mark the property getter as @Composable:
    val title_s: TextStyle @Composable get() = ...
    Albert Chang

    Albert Chang

    11 months ago
    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

    11 months ago
    @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

    Albert Chang

    11 months ago
    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

    11 months ago
    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

    Albert Chang

    11 months ago
    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.