How to change Typography MaterialTheme color of a ...

# compose

[K Merle]

How to change Typography MaterialTheme color of a text in the root?

[Pedro Alberto]

Can you explain ? With a example what you want to achieve?

[K Merle]

I wanna change displayLarge text color to be MaterialTheme.colorScheme.onBackground for example.

[leandro]

From my investigations it does not seem like it’s possible, but i’m happy to be proven wrong

[Pedro Alberto]

It si possible you just need to define that in the theme 🙂

[Pedro Alberto]

checkout this https://github.com/android/compose-samples/blob/main/Owl/app/src/main/java/com/example/owl/ui/theme/Theme.kt

you can define your typography

[Pedro Alberto]

so yuo can see this

MaterialTheme(
colors = colors,
typography = typography,
shapes = shapes,
content = content
)

[Alex Styl]

there’s a color parameter in TextStyle. You can use that to change the color of particular style

[Alex Styl]

what is displayLarge though?

[Pedro Alberto]

you can see this one too

[Pedro Alberto]

https://github.com/android/compose-samples/blob/main/Jetcaster/app/src/main/java/com/example/jetcaster/ui/theme/Type.kt

[Pedro Alberto]

has it's own typography

[Pedro Alberto]

but I wouldn't make that part of the Typography

[K Merle]

@Alex Styl That's what I'm asking. There is a parameter color, but it does not know about darkTheme if you explicitly define it. So setting it to Color.White would make it same color in both dark and light theme. Having it defined by the MaterialTheme colorScheme would be more appropriate to the theme change.

[K Merle]

displayLarge is part of Material3 Typography https://m3.material.io/styles/typography/type-scale-tokens.

[Alex Styl]

@K Merle I am not familiar with Material3 so I am not sure if they support that usecase.

How I would approach it (without M3) is by checking if the app is in dark mode and provide a different color value to the part you need.

ie:

val Colors.myOwnColor: Color
    @Composable
    get() {
        if (isSystemInDarkTheme()) {
            return Color.Red
        } else {
            return Color.Blue
        }
    }

It’s an extension so that you can use it via MaterialTheme.colors.myOwnColor

[K Merle]

Yea, that's a good tip. I just wanted to avoid customization, and have specific typography type with specific material color.

[K Merle]

I was able to achieve overriding Typography TextType as following:

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = false,
    content: @Composable () -> Unit
) {
    
    ...
    
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography.copy(displayLarge = Typography.displayLarge.copy(color = MaterialTheme.colorScheme.onSurfaceVariant)),
        content = content
    )
}