airbnb / Showkase

🔦 Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements
https://medium.com/airbnb-engineering/introducing-showkase-a-library-to-organize-discover-and-visualize-your-jetpack-compose-elements-d5c34ef01095
Apache License 2.0
2.11k stars 107 forks source link

[Request] Provide dark background for rendering Dark mode previews #289

Closed trod-123 closed 3 months ago

trod-123 commented 1 year ago

Apologies if this is already available, I have not seen any callouts for this in the README.

Basically, the request is to render a black card background in the [Dark Mode] preview generated by Showkase.

I defined my own Preview annotation which provides both the Light and Dark versions of content.

@Preview(
    name = "Light theme",
    showBackground = true,
    backgroundColor = 0xFFFFFFFF,
    uiMode = UI_MODE_NIGHT_NO
)
@Preview(
    name = "Dark theme",
    showBackground = true,
    backgroundColor = 0xFF000000,
    uiMode = UI_MODE_NIGHT_YES
)
internal annotation class PreviewDefaults

Which generates the following:

image

It would be great to have a similar functionality provided by Showkase out of the box. As it stands, the previews look like the following - note the content text in [Dark Mode] can't be read because the background is white, and not black.

image

As a workaround, I can wrap my preview content in a box that provides a background (with additional padding so we can see the dashed borders), but I do not think I should do this every time.

@ShowkaseComposable(
    name = PREVIEW_NAME,
    group = GROUP_CARD,
    defaultStyle = true,
)
@PreviewDefaults
@Composable
internal fun DashedCardPreview() {
    MyTheme {
        Box(
            modifier = Modifier
                .background(color = MyTheme.colors.background.page.default)
                .padding(16.dp)
        ) {
            DashedCardSample()
        }
    }
}
image
vinaygaba commented 1 year ago

Since these are properties of the @Preview annotation itself, I'm open to adding them to @ShowkaseComposable and/or honoring what's passed as part of @Preview. For prioritization sake, I'm curious to see if more people would benefit from this change.

micHar commented 1 year ago

Interested!

eboudrant commented 1 year ago

Interested too

kikin81 commented 1 year ago

Alton09 commented 1 year ago

+1 this would be a great to have!

kikin81 commented 1 year ago

wonder if it could be achieved via theme overrides/local composition providers? I would love to be able to map our design systems surface colors and typography to the showkase theme!

drinkthestars commented 1 year ago

+100 this would be great to have when combining with screenshot testing for light/dark modes

kmalmur commented 11 months ago

me too

yerdaulet1991 commented 10 months ago

interested

sjaramillo10 commented 5 months ago

Interested!