Skip to main content
Donovan LaDuke - Developer

Compose Theme Preview

Featured in Android Weekly Issue 585

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)  
private fun ThemeColorsPreview() {  
	verticalArrangement = Arrangement.spacedBy(8.dp)
  ) {
	ColorBox(color = Red, name =  
	ColorBox(color = Green, name =  
	ColorBox(color = Blue, name =  

fun ColorBox(color: Color, name: String) {  
  Box(modifier = Modifier  
	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 at one of the services below, it goes a long way in helping run this site. Thank you in advance!

Donate with PayPal Buy me a Coffee on Ko-fi Support me on Patreon