Compose Theme Preview

While Android Studio gives you a quick preview of colors on the left of the screen while working on your Jetpack Compose theme values, you don't have that luxury for typography or other theme values. However, we can leverage the power of Compose previews to show off our values quickly and in near real time thanks to Live Edit. Shout-out to my coworker Katie Dotson who first introduced me to this idea, you can catch her on her LinkedIn!

Now, check out an example below showing how this can be done with colors in our theme.

val Red = Color(0xFFFF0000)  
val Green = Color(0xFF00FF00)  
val Blue = Color(0xFF0000FF)  
    
@Preview  
@Composable  
private fun ThemeColorsPreview() {  
  Column(
	verticalArrangement = Arrangement.spacedBy(8.dp)
  ) {
	ColorBox(color = Red, name = ::Red.name)  
	ColorBox(color = Green, name = ::Green.name)  
	ColorBox(color = Blue, name = ::Blue.name)  
  }  
}

@Composable  
fun ColorBox(color: Color, name: String) {  
  Box(modifier = Modifier  
	.size(48.dp)  
	.background(color),  
	contentAlignment = Alignment.Center,  
  ) {  
	Text(text = name)  
  }  
}  

This pattern is great because you can easily extend it to preview typography, spacing, or even your entire theme in a preview window! Now you can see and iterate on your theme values quickly. If you want to copy over and play with the whole file, you can find it in this gist. Until next time, thanks!

Did you find this content helpful?

Please share this post and be sure to subscribe to the RSS feed to be notified of all future articles!

Want to go above and beyond? Help me out by sending me $1 on Ko-fi. It goes a long way in helping run this site and keeping it advertisement free. Thank you in advance!

• Previous: Kotlin Exhaustive when
• Next: Dev Diary - August 2023