https://kotlinlang.org logo
Join Slack
Powered by
:wave: I'm not sure how to handle different text ...
# compose
m
👋 I'm not sure how to handle different text colors in Material Theme 🧵
If I understood correctly Material Text picks the color from LocalContentColor (If not explicitly set). Some components like Cards ( surfaces) set the LocalContentColor so if you theme pallete is correct you get text color working by default. But what if within that same card I have texts with different color? Is the only option to create a custom theme with something like textAColor textBColor?
f
Just set the color explicitly: 
Text(text = "Hello", color = MyTextColor)
If 
MyTextColor
is dependant on theme (dark/light), you can make it as extension value on material Colors object. Something like this
m
Nice! I was thinking it something similar to that. Just wasn't sure if it was a good approach. ( Yeah it'd be theme dependant)
f
No sure how "good" the approach is but it's working for me 😄
p
@Marco Pierucci if you want to use a theme color in a text just use the singleton. Usually it's something like MaterialTheme.colorScheme.primary on the text. The theme should handle the light and dark color
m
Thats the thing right? There is no theme color for text ( dunno somethign like header headline etc) I cant use primary unless am lucky enough that the actual color is the one used for primary. And I cant jsut adjust primary colro to be based on text
p
you can 🙂
Screenshot 2023-02-09 at 15.54.42.png
the style is set in the Theme
style = MaterialTheme.typography.h4,
m
how;s that relevant my original question?
What If I need h4 in one color and on the same place h4 in a different color
p
it's an example the same you can do with color
i.e in the same class you circular indicator
m
But that does not solves my issue.
f
The issue is that most designers I know don't care about Material theme and have 10 different colors for text 😄
p
lol
but if yout theme actually sets colors then you can use the theme tocolro your components. Not just text but anything else.
the benefit of this is that the theme can support light and dark mode and then all color should simply switch
m
yeah butsthat hte thing 
colorOnSurface
has specific usage on the theme you can just force it to be the one deiser for a text
even if that were the case by mircale hwo do you handle more colors? start using on.. until you run our of provided colorsby the theme
Looks like the option its either haivng your custom theme and exposing colors for text or do what Dilip suggested
p
we have custom theme
🙂
it works lot's of work
m
lol that how I started my question, but thanks!
p
you can also use composition local to overrride but it depends on the design system and how complex it is. but I guess this solution might solve your problem https://stackoverflow.com/questions/65994303/how-to-add-extra-colors-into-materialtheme-in-android-jetpack-compose
m
Copy code
@get:Composable
val MaterialColors.textTertiary: Color
    get() = if (isLight) White else DoveGray
This look good enough for a simple use case
l
m
Yeah, that's a pretty simple use case. However, if you have more than just light/dark variations, you probably would want to create a class to hold your color tokens, along with a composition local and extension for it.
Copy code
class MyColors(val textTertiary: Color)

val LocalMyColors = staticCompositionLocalOf {
    MyColors(textTertiary=...)
}


val MaterialTheme.myColors: MyColors
    @Composable get() = LocalMyColors.current
This way, you can use a composition local provider. This lets you construct a variety of themes and color combinations other than just light/dark.
Copy code
CompositionLocalProvider(
   LocalMyColors provides ....
) { 
    MaterialTheme {
        content()
    }
}
This is actually how the entire MaterialTheme is built (though the colors are a bit more complex so they can switch effeciently at runtime)
8 Views
Open in Slack
PreviousNext
Powered by