Question about the `MaterialTheme` colors and typography. If I create a `MaterialTheme` with a prima...

# compose

[Luis Mierez]

Question about the MaterialTheme colors and typography. If I create a MaterialTheme with a primary color of Color.Blue, and a button TextStyle that has the color set to Color.White , which color takes precedent when using a TextButton ?

[Luis Mierez]

I guess a follow up question is, is there a way to know where the text color is coming from?

[Se7eN]

Not really sure but I think the MaterialTheme color takes precedence.

[Se7eN]

You'll have to look at the parameters and/or the source code of the composable to know where the color is coming from

[Luis Mierez]

That’s what I thought but from testing it seems that it is pulling the color from the TextStyle, which is messing up the color of the TextButton … TextButton uses the primaryColor for the text color, but it is pulling the default from the button TextStyle

[Chris Sinco [G]]

Hmm do you have a code snippet that shows what you are observing?

[Chris Sinco [G]]

To change the colors of the text in the TextButton, you have to pass a different color set to the colors parameter. This is the colors defined by default if you don’t do so

[Luis Mierez]

TextButton(
    onClick = updateInfoOnClick,
    modifier = Modifier.weight(1f, true)
    ) {
        Text(text = stringResource(id = R.string.update_my_info))
    }

[Luis Mierez]

so that’s all I got for the text button

[Chris Sinco [G]]

Right. So you’ll need to pass a different set of colors if you don’t want the colors used in the above definition, i.e. MaterialTheme.colors.primary for contentColor

[Luis Mierez]

right, I want it to use the MaterialTheme.color.primary which is the default param for the TextButton , but it’s pulling in the default for the button TextStyle

[Chris Sinco [G]]

Where are you defining that TextStyle that has Color.White and how are you using it in the TextButton?

[Luis Mierez]

In my MaterialTheme I’m passing in the colors with a primary color of our blue

[Chris Sinco [G]]

I see, and is TextButton within that MaterialTheme hierarchy?

[Luis Mierez]

Typography(
        h1 = TextStyle(
            fontFamily = Roboto,
            fontWeight = FontWeight.Light,
            fontSize = 96.sp,
            color = Color.Black
        ),
        h4 = TextStyle(
            fontFamily = Roboto,
            fontWeight = FontWeight.Medium,
            fontSize = 34.sp,
            color = Color.Black
        ),
        body1 = TextStyle(
            fontFamily = Roboto,
            fontWeight = FontWeight.Normal,
            fontSize = 16.sp,
            color = Color.Black
        ),
        button = TextStyle(
            fontFamily = Roboto,
            fontWeight = FontWeight.Medium,
            letterSpacing = 0.sp
        )
    )

[Luis Mierez]

and then if I change the button text style color it’ll pull that one in

[Luis Mierez]

yeah I have my whole composable screen wrapped in my theme composable

[Chris Sinco [G]]

Gotcha. Yes that is expected to use the color set in the button style in Typography because if you look at the Button implementation, it’s using a CompositionLocal within the Surface which is after using colors pulled from the Button parameters

[Chris Sinco [G]]

Personally I often don’t set colors in the TextStyles within Typography and instead use colors in the MaterialTheme or set colors at the component level. @Louis Pullen-Freilich [G] might have more insight as well

[Luis Mierez]

gotcha, thanks for the info. I tried reading that but wasn’t sure about it haha

[Luis Mierez]

so even if I don’t set the color in the Typography object it’ll still won’t pull in the primary color

[Chris Sinco [G]]

it’ll still won’t pull in the primary color

That seems like a bug

[Louis Pullen-Freilich [G]]

Explicit colors on a TextStyle are always used first, but in a Material app you should not set colors on a style - colors are separate from text.

Text (and icons) by default use LocalContentColor, which is provided by different components, such as AppBar and Button. This ensures that text will follow the correct theme color for the background it is on, and also so it will automatically adjust to light / dark themes.

I would recommend removing all the color = Color.Black from your Typography styles

[Luis Mierez]

gotcha, I was making the opposite assumption, thanks!

[Luis Mierez]

I figure out my issue (thanks to y’all!) I’m using the mdcTheme and I was passing setTextColors to true which sets the colors to the Typography object, and it was overriding my theme color. I appreciate all the help!