Android Jetpack Compose Preview UI_MODE_NIGHT_YES does not show dark background in preview

I am following https://developer.android.com/jetpack/compose/tutorial

and the code

@Preview(name = "Light Mode")
@Preview(name = "Dark Mode", uiMode = Configuration.UI_MODE_NIGHT_UNDEFINED, showBackground = true)
@Preview(name = "Full Preview", showSystemUi = true)
@Composable
fun DefaultPreview() {
    ComposeTutorialTheme {
        MessageCard(Message("Roman", "message body"))
    }
}

It "works" in the tutorial because they use a Card which uses a Surface under the hood.

The dark background you are seeing is not produced by the @Preview annotation, but rather by the Surface which simply draws its own background based on the MaterialTheme.

Barebones implementation of Surface:

fun Surface(
    color: Color = MaterialTheme.colorScheme.surface,
) {
    Box(
        modifier = modifier.surface(
            backgroundColor = color
        ),
    ) {
        ...
    }
}

Surface also overrides the "content color" with

CompositionLocalProvider(
    LocalContentColor provides contentColorFor(color),
) {
    content()
}

so that the text or icons displayed within the Surface contrast well with the background color.

You still have to set up the MaterialTheme to follow the dark theme. Finally, the preview composable would looks something like this:

@Preview
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun BannerPreview() {
    PlaygroundTheme {
        Surface {
            Banner()
        }
    }
}

Here is a comparison of how previews like look when you forget to use a Card/Surface or do not apply an isSystemInDarkTheme()-aware MaterialTheme: