any idea why this isn't showing in dark mode? ```...

# compose

[Colton Idle]

any idea why this isn't showing in dark mode?

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun HelloWorldPreview() {
    MaterialTheme() { Surface { Text("Hello kotlinglang") } }
}

[Alex Vanyo]

The base MaterialTheme just uses a light color scheme by default, and doesn’t react to light and dark mode automatically

[Colton Idle]

Hm. I'm just copying from the sample docs.

[Colton Idle]

I thought MaterialTheme {} would be enough though.

[Colton Idle]

Tried something like this too. no luck. dang.

@Composable
fun Mytheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
  AppTheme(colors = if (darkTheme) darkColors() else lightColors(), content = content)
}

[Colton Idle]

let me try a newer version of studio

[Stylianos Gakis]

any chance you are using MaterialTheme from material2 and Surface + Text from material3 or vice versa?

[chanjungskim]

don't you need background?

[Stylianos Gakis]

don’t you need background?

Surface sets a background along with the ContentColor composition local by itself

[Colton Idle]

Yeah, I thought surface would solve this. Let me make sure im not mixing and matching material2 and 3 lol

[Chris Sinco [G]]

Surface is needed. And mixing M2 and M3 will break this

[Stylianos Gakis]

That’s why you make a [AppName]Theme composable, and have it wrap both M2 and M3 and then proceed to (almost*) never worry about this ever again 😄
Doing this has been one of the best things I’ve done to facilitate slowly starting to use more and more M3 components.

*Just gotta be careful when mixing them when you are using a container which is supposed to change the content color. If the inner components are of the other theme (be it m2 container + m3 component or m3 container + m2 component) then you will still not get the desired results since it will change the wrong LocalContentColor composition local

[Colton Idle]

I guess its weird that the sample on the @Preview documentation page doesn't actually work. lol

[Chris Sinco [G]]

I think it actually does work in M2 which is when the that sample was originally made

[Chris Sinco [G]]

Probably should update it now for M3

[Colton Idle]

Hm. I tried in m2 and it didn't, but maybe i messed something up. but yeah. this is like the super common case for previews and so looking up the docs with a working sample would be swell

[Chris Sinco [G]]

Yeah I see the broken snippet with MaterialTheme, which we can fix. But we will likely abstract it out to say MyAppTheme or something. In reality, Preview is working as intended - the actual bug is in the theming code

[Chris Sinco [G]]

Following up here - this snippet I made is helpful to understand the nuances of Preview and using showBackground, MaterialTheme, and Surface: https://kotlinlang.slack.com/archives/C04TPPEQKEJ/p1683230596040239?thread_ts=1683052562.837869&cid=C04TPPEQKEJ