*Is it possible to declare the theme to be used fo...

# compose

[Zoltan Demant]

Is it possible to declare the theme to be used for @Preview externally?
My design system is used in 3 different projects, each with its own set of colors, shapes, etc. It would be really nice to be able to just declare the theme to be used, and have all the previews just work.

[Joel Denke]

Yeah, just wrap with your theme in the preview?

[Zoltan Demant]

The design system has LocalColors, etc, but the values come from the different projects. I can have defaults in the design system for the previews (this is what Ive been doing) but the designs are so different at this point that it doesnt really help.

[Joel Denke]

Hmm not sure I follow what you trying to do here. If apply different themes they all provide their own LocalColor compositions or?

[Joel Denke]

Shouldnt it just work to do:

CompositionLocalProvider(
        LocalColorTheme provides colorTheme,
    ) {
       PreviewCOmposable()
}

?

[Joel Denke]

If you want the colorTheme itself, given that it doesnt have COmposable dependencies in the code, can be given PreviewParameters if you prefer that to generate colorTheme.

[Joel Denke]

Could also have like MyTheme(colorTheme = brandingColorSet) where can override the colorSet from the preview.

[Zoltan Demant]

Perhaps an example can explain it better than I can 😃

In my design system library I have:

@Composable
fun Themed(
    palette: Palette = Theme.palette,
    structure: Structure = Theme.structure,
    type: Type = Theme.type,
    content: @Composable () -> Unit,
)

And a bunch of @Preview like this:

@AllPreviews
@Composable
fun Buttons() {
    Themed(
        palette = // I need this from my OTHER project
        content = { .. }
    )
}

What Id like to be able to do is include the design system library in each of my projects, and somehow declare that the palette the previews should use is x, y, z, etc.

Dunno if that makes more sense? Maybe preview parameters can work for this, but Im also not sure if I can supply the providers from my other project?

[Zoltan Demant]

The only viable option I can think of is creating a catalog sort of app that each project inherits and specifies its own set of colors, etc, but that involves so much more work than just using @Preview

[Joel Denke]

Sounds like need preview happening in each design system project. Feels like a circular dependency thing.
But Imagine color palette is in your design system then would be easy. Wonder if can do something like that like take generated code or such.
Also have you tested library Showkase, maybe solves some of issues?

[Zach Klippenstein (he/him) [MOD]]

Sounds circular to me, but assuming it is possible you could define a preview wrapper composable, put it in a special module that you only depend on in debug config from all your other modules, then at least you could do all the wrapping with a single line of code.

[Joel Denke]

Yeah you could do like this:

@Retention(AnnotationRetention.BINARY)
@Target(
    AnnotationTarget.ANNOTATION_CLASS,
    AnnotationTarget.FUNCTION
)
@Preview(name = "Light")
@Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
annotation class PreviewLightDark

Source from androidx compose ui tooling 🙂

[Joel Denke]

Not entirely sure if you can add your own properties here, but I think so. But then need to read them from somewhere 😛

[Zoltan Demant]

Yeah, its a circular thing 😶 I think Showkase might work, if I remember correctly I can wrap the generated code in my own stuff.. i.e. each project. Maybe thats as good as it gets?
If I understand you both correctly, you mean to put all the multi preview stuff in one place.. but Id still need to create previews in each project? If thats the case, I have nearly 100 components, which is why Im trying so hard to re-use the previews 😄

[Joel Denke]

Hard to tell depending how your structure of repos vs modules is. Maybe would help re-structure modules, not sure.
But somehow injecting preview screens across modules I would guess is needed or if possible to re-use the preview code you have by sharing the code inside the preview blocks or insert components on the fly inside them. Not sure. Its a lot of guessing here.
If only need Android, I would test Showkase, as often fulfills most goals I think, has suited me well in the past 🙂

[Zoltan Demant]

Its a multiplatform project too 😃 Currently leaning towards just creating a catalog type of deal where each project has to supply its own set of colors, etc. I can continue using previews inside the design library itself, even if shapes, colors and all of that wont reflect the final look, I can still see that text is where it should be, etc. Thank you both for your input fist bump