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

Question

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"))
    }
}

Answer 1

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:

Answer 2

Another silly reason it might happened even if you added your Theme wrapping Surface wrapping your composable, is that the imports might not be corrected. since i'm using material3 i need to use this import:

import androidx.compose.material3.Surface

Instead of this:

import androidx.compose.material.Surface

If i'm using the old one (without 3) it is compiling and ignoring ui mode.

Answer 3

If you've tried all the tricks and still don't get the preview in dark mode, find the res/values/themes.xml file and change the paren to parent="Theme.Material3.DayNight" (or any other theme, which will affect your preview).

This worked for me and I hope it helps.