Hello all. I have a question about button text co...

# compose

[Billy Newman]

Hello all. I have a question about button text color in regards to the primary color. Should the text color automatically change from black to white based on the buttons primary color? Example in reply.

[Billy Newman]

Running in dark theme. Given a primary color like:

val Grey900 = Color(0xFF212121)

With a Theme:

private val DarkColorPalette = darkColors(
  primary = Grey900
)

And a button:

Button(onClick = {...}) {
   Text(text = "BUTTON TEXT")
}

I am still seeing a text color of black, which is very hard to see on a button that dark. An I setting up my theme wrong, or is switching the text color on a button something that is left up to me?

[Casey Brooks]

Nope, static colors like that won't change automatically. Predefined colors will change with the Theme, and widgets may override theme colors themselves, but when you set a Color from an int, that's just the color you get.

You can use MaterialTheme.colors.isLight to check if you're in a light or dark theme, and change the color dynamically. For example:

val Grey900 @Composable get() = if(MaterialTheme.colors.isLight) Color(0xFF212121) else Color(0xFFFFFFFF)

[Louis Pullen-Freilich [G]]

If you are setting that color as primary, then you should also set a color for onPrimary which will be the color used for text by default here

[Billy Newman]

@Louis Pullen-Freilich [G], yup that makes sense, I was looking at the default definition of “darkColors” in the compose library.

onSurface: Color = Color.White,

Makes sense that this is what is being used for a button, since by default compose uses a surface of “primary”/.

onPrimary: Color = Color.Black,