Anyone know how to set dark mode in the preview wi...

# compose

[mattinger]

Anyone know how to set dark mode in the preview window? I have a custom theme that i can pass colors, but the default is to call a composable function which checks the

isSystemInDarkTheme()

function and decides whether to return my light or dark colors instance.

[Alexander Sitnikov]

Use uiMode annotation parameter: @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)

[Se7eN]

Or do it like this:
@Composable
fun Content(isDark: Boolean = isSystemInDarkTheme()) {
...
}
Pass true when you want to preview in dark mode

[mattinger]

fair enought. I know with XML i can set the theme in the preview, which is how i generally test that stuff, but i guess a different @Preview type function can suffice.

[mattinger]

I’ve also noticed the preview is still rather buggy. Sometimes i’ll have to refresh 3 and 4 times before it will render. The first few times, i get “The project needs to be compiled for the preview to be displayed”

[mattinger]

if i refresh enough times, it eventually works.

[Se7eN]

I hope it gets fixed in the stable version

[mattinger]

it’s one of the really nice features, but as buggy as it is, it can’t go out like that i wouldn’t think.

[mattinger]

I also think constraint layout is still pretty buggy in compose. i’m trying to do something very simple like have a button bar on the bottom of the screen, and have a ScrollableColumn occupy the rest of the screen, and it pretty much refuses to attach the bottom of the ScrollableColumn to the top of the button bar. It keeps attaching to the bottom of the screen and thus there’s content overlap which i don’t want.

[mattinger]

i’ll try too isolate it and submit a compose bug sometime tomorrow

[julioromano]

@Alexander Sitnikov

Use uiMode annotation parameter: @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)

Does this preview annotation with night mode parameter still work for you?

I’ve tried many times but it still returns a light mode UI.

[Alexander Sitnikov]

Yes, it still works for me in beta02. I use "MDC-Android Compose Theme Adapter" library which applies dark theme automatically using themes form values/ and values-night/ resource folders. If you use MaterialTheme, you can use isSystemInDarkTheme() composable to supply different colors to it depending on current theme setting
https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]samples/ThemeSamples.kt;l=40

[julioromano]

It’s a 100% compose app and I’m using MaterialTheme with isSystemInDarkTheme() but it seems that setting @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) does not affect the return value of isSystemInDarkTheme() .

[Alexander Sitnikov]

Yeah, I just checked, and it doesn't work for me either - seems like uiMode just doesn't propagate to the LocalConfiguration. I found this issue, fix is going to land in Canary 12