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

Marco Pierucci

02/09/2023, 2:28 PM
👋 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

Filip Wiesner

02/09/2023, 2:31 PM
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

Marco Pierucci

02/09/2023, 2:32 PM
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

Filip Wiesner

02/09/2023, 2:34 PM
No sure how "good" the approach is but it's working for me 😄
p

Pedro Alberto

02/09/2023, 2:49 PM
@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

Marco Pierucci

02/09/2023, 2:53 PM
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

Pedro Alberto

02/09/2023, 2:54 PM
you can 🙂
Screenshot 2023-02-09 at 15.54.42.png
the style is set in the Theme
style = MaterialTheme.typography.h4,
m

Marco Pierucci

02/09/2023, 2:55 PM
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

Pedro Alberto

02/09/2023, 2:56 PM
it's an example the same you can do with color
i.e in the same class you circular indicator
m

Marco Pierucci

02/09/2023, 2:57 PM
But that does not solves my issue.
f

Filip Wiesner

02/09/2023, 2:58 PM
The issue is that most designers I know don't care about Material theme and have 10 different colors for text 😄
p

Pedro Alberto

02/09/2023, 2:58 PM
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

Marco Pierucci

02/09/2023, 3:00 PM
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

Pedro Alberto

02/09/2023, 3:01 PM
we have custom theme
🙂
it works lot's of work
m

Marco Pierucci

02/09/2023, 3:01 PM
lol that how I started my question, but thanks!
p

Pedro Alberto

02/09/2023, 3:04 PM
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

Marco Pierucci

02/09/2023, 3:19 PM
Copy code
@get:Composable
val MaterialColors.textTertiary: Color
    get() = if (isLight) White else DoveGray
This look good enough for a simple use case
l

Louis Pullen-Freilich [G]

02/09/2023, 6:51 PM
m

mattinger

02/10/2023, 5:51 AM
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)
7 Views