Is there a better way of previewing all my composables in light and dark mode, without having to dup...

# compose

[Marcin Wisniowski]

Is there a better way of previewing all my composables in light and dark mode, without having to duplicate every @Preview function?

[Feri Nagy]

You can add multiple @Preview annotations with different args.

[Andrew Neal]

You could use a PreviewParameterProvider that provides all the color schemes your app uses, something like:

class ThemedPreviewParameterProvider : PreviewParameterProvider<Colors> {
    override val values: Sequence<Colors>
        get() = ...
}

@Preview
@Composable
private fun Preview(@PreviewParameter(ThemedPreviewParameterProvider::class) colors: Colors) {
    MyAppTheme(colors = colors) {
        previewContent()
    }
}

[Marcin Wisniowski]

Thank you, I didn't realize you can add multiple @Preview annotations, that's convenient!

[Chris Sinco [G]]

Yep definitely use multiple annotations! Also a good way to check things like change in fontScale and locales

[Chris Sinco [G]]

PreviewParameterProvider is also very useful for passing different mock data

[Marcin Wisniowski]

Hmm, I wish I could define all the preview combination I need in one place and use something like @PreviewAll(MySettings). The PreviewParameterProvider is powerful, but a bit verbose.

[Chris Sinco [G]]

Fair enough! We’ve been thinking through improving Preview APIs in general and this certainly has come up 🙂