How to see preview for composable dark and light with background in compose multiplatform?

Question

I'm using Compose Multiplatform 1.8.2 and in my commonMain, I have the following composable function with a preview:

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import blitz_split.feature.login.login_presentation.generated.resources.Res
import blitz_split.feature.login.login_presentation.generated.resources.blitz_split_login_art
import blitz_split.feature.login.login_presentation.generated.resources.split_screen_message
import com.blitzplit.component.logo.Logo
import com.blitzsplit.spacer.VerticalSpacer
import com.blitzsplit.theme.AppTheme
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.resources.stringResource

@Composable
fun LoginContent(
    isLoading: Boolean,
    onLoginWithGoogleClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceAround
    ) {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Logo(modifier = Modifier.fillMaxWidth())
            VerticalSpacer()
            Text(
                modifier = Modifier
                    .padding(horizontal = 32.dp),
                text = stringResource(Res.string.split_screen_message),
                style = MaterialTheme.typography.bodyLarge.copy(
                    fontWeight = FontWeight.Bold,
                    color = LocalContentColor.current.copy(alpha = 0.6f)
                ),
                textAlign = TextAlign.Center,
            )
            VerticalSpacer(32.dp)
            Image(
                painter = painterResource(Res.drawable.blitz_split_login_art),
                contentDescription = "background login"
            )
        }
        val dynamicModifier = Modifier.fillMaxWidth()
        LoginWithGoogleButton(
            modifier = dynamicModifier.padding(horizontal = 32.dp),
            onLoginWithGoogleClick = onLoginWithGoogleClick,
            isLoading = isLoading,
        )
    }
}

@Composable
@PreviewLightDark
private fun LoginContentPreview() {
    AppTheme {
        LoginContent(
            isLoading = false,
            onLoginWithGoogleClick = {}
        )
    }
}

It shows the preview correctly for light and dark. But it doesn't show the background:

If I change the preview function to use:

@Composable
@PreviewLightDark
@Preview(showBackground = true)

Then I'll see three preview functions (the light without background, the dark without background, and the light with background). But it doesn't show me the dark background:

How can I see the background for the dark and light previews in the compose multiplatform?

tyg · Accepted Answer · 2025-06-26 09:59:01Z

-1

To add some more information:

Each @Preview annotation creates a new preview. @PreviewLightDark is internally annotated with two of such annotations, so using it will generate two of them. Then you added @Preview(showBackground = true), which creates the third preview you see.

Instead, you want the first two previews configured with showBackground = true, not a new preview.

There are no predefined previews with light and dark themes and background, but you can simply copy the existing PreviewLightDark and create your own:

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

Then you can use that instead:

@Composable
@PreviewLightDarkWithBackground
private fun LoginContentPreview() {
    AppTheme {
        LoginContent(
            isLoading = false,
            onLoginWithGoogleClick = {}
        )
    }
}

answered Jun 26 at 9:59

tyg

20.7k5 gold badges46 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pierre Vieira Jun 29 at 3:19

It didn't work as expected. The dark background is loading the light, my theme is correct:

Collectives™ on Stack Overflow

How to see preview for composable dark and light with background in compose multiplatform?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related