CODEWITHSUNDEEP
androidandroid-dark-themeandroid-darkmode
rofrol
rofrol

Reputation: 15226

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

enter image description here

Upvotes: 34

Views: 19658

Answers (3)

Vichin H
Vichin H

Reputation: 11

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.

Upvotes: 1

Udi Oshi
Udi Oshi

Reputation: 6867

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.

Upvotes: 4

Antimonit
Antimonit

Reputation: 3264

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:

Upvotes: 54

Related Questions