# compose

Billy Newman

01/24/2022, 6:44 PM
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.
Running in dark theme. Given a primary color like:
Copy code
val Grey900 = Color(0xFF212121)
With a Theme:
Copy code
private val DarkColorPalette = darkColors(
  primary = Grey900
And a button:
Copy code
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

01/24/2022, 6:52 PM
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
to check if you're in a light or dark theme, and change the color dynamically. For example:
Copy code
val Grey900 @Composable get() = if(MaterialTheme.colors.isLight) Color(0xFF212121) else Color(0xFFFFFFFF)

Louis Pullen-Freilich [G]

01/24/2022, 6:53 PM
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
☝️ 2

Billy Newman

01/24/2022, 7:54 PM
@Louis Pullen-Freilich [G], yup that makes sense, I was looking at the default definition of “darkColors” in the compose library.
Copy code
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”/.
Copy code
onPrimary: Color = Color.Black,