Hello all I have a question about button text color in regar kotlinlang #compose

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:

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

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

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]

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.

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,

2 Views

#compose Join Slack