Material Theme Colors results in blank Jetpack Compose Button

Question

A simple composable with default Material Theme colors (code below) results in the following preview image (both in IDE and on device)

@Preview
@Composable
fun PreviewCalendar() {
  MaterialTheme {
    Column{
      Row{Text("Hello World")}
      Row{Button(onClick = {}){Text("Hello World Button")} }
    }
  }
}

When providing my own colors, then the button becomes blank (code and screenshot below). Reading through source for Button I would have expected the button to have primary as the background color. Have I implemented my colors incorrectly? I could not find a bug report for similar behavior

val lightTheme = 
  Colors(
    primary = Color(0x0d47a1),
    primaryVariant = Color(0x5472d3),
    secondary = Color(0x212121),
    secondaryVariant = Color(0x484848),
    background = Color(0xffffff),
    surface = Color(0xffffff),
    error = Color(0xB00020),
    onPrimary = Color(0xffffff),
    onSecondary = Color(0xffffff),
    onBackground = Color(0x000000),
    onSurface = Color(0x000000),
    onError = Color(0xffffff),
    isLight = true
  )

@Preview
@Composable
fun PreviewCalendar() {
  MaterialTheme(colors = lightTheme) {
    Column{
      Row{Text("Hello World")}
      Row{Button(onClick = {}){Text("Hello World Button")} }
    }
  }
}

user_1108468 · Answer

I generated these colors using google's material theme tools, but did not notice that Compose was looking for ARGB color space. All the colors that I specified had an alpha value of 0, and were therefore transparent. The correct colors are:

val lightTheme = 
  Colors(
    primary = Color(0xFF0d47a1),
    primaryVariant = Color(0xFF5472d3),
    secondary = Color(0xFF212121),
    secondaryVariant = Color(0xFF484848),
    background = Color(0xFFffffff),
    surface = Color(0xFFffffff),
    error = Color(0xFFB00020),
    onPrimary = Color(0xFFffffff),
    onSecondary = Color(0xFFffffff),
    onBackground = Color(0xFF000000),
    onSurface = Color(0xFF000000),
    onError = Color(0xFFffffff),
    isLight = true
  )

Material Theme Colors results in blank Jetpack Compose Button

1 Answers