PreviewThemes

Multi-preview annotation for testing Composables in light and dark themes.

Applying this annotation automatically generates preview variants for both light and dark UI modes, ensuring your components look correct in all theme configurations.

Usage

@PreviewThemes
@Composable
fun MyButtonPreview() {
    JetpackTheme {
        Surface {
            MyButton(
                text = "Click Me",
                onClick = {}
            )
        }
    }
}

Best Practices

• Always wrap previews in JetpackTheme to test theme colors

• Use Surface for components that need a background

• Combine with @PreviewDevices to test themes across device sizes

Combining Multiple Preview Annotations

@PreviewThemes
@PreviewDevices
@Composable
fun ComprehensivePreview() {
    JetpackTheme {
        MyScreen(/* ... */)
     }
 }
 // Generates 8 previews: 4 devices × 2 themes

See also