https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
c

Colton Idle

03/22/2023, 4:51 PM
any idea why this isn't showing in dark mode?
Copy code
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun HelloWorldPreview() {
    MaterialTheme() { Surface { Text("Hello kotlinglang") } }
}
a

Alex Vanyo

03/22/2023, 4:54 PM
The base 
MaterialTheme
just uses a light color scheme by default, and doesn’t react to light and dark mode automatically
c

Colton Idle

03/22/2023, 4:58 PM
Hm. I'm just copying from the sample docs.
I thought MaterialTheme {} would be enough though.
Tried something like this too. no luck. dang.
Copy code
@Composable
fun Mytheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
  AppTheme(colors = if (darkTheme) darkColors() else lightColors(), content = content)
}
let me try a newer version of studio
s

Stylianos Gakis

03/22/2023, 5:54 PM
any chance you are using MaterialTheme from material2 and Surface + Text from material3 or vice versa?
c

chanjungskim

03/23/2023, 12:33 AM
don't you need background?
s

Stylianos Gakis

03/23/2023, 12:34 AM
don’t you need background?
Surface sets a background along with the ContentColor composition local by itself
c

Colton Idle

03/23/2023, 3:56 AM
Yeah, I thought surface would solve this. Let me make sure im not mixing and matching material2 and 3 lol
c

Chris Sinco [G]

03/23/2023, 5:11 PM
Surface is needed. And mixing M2 and M3 will break this
s

Stylianos Gakis

03/23/2023, 5:15 PM
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
c

Colton Idle

03/23/2023, 5:23 PM
I guess its weird that the sample on the @Preview documentation page doesn't actually work. lol
c

Chris Sinco [G]

03/23/2023, 5:30 PM
I think it actually does work in M2 which is when the that sample was originally made
Probably should update it now for M3
c

Colton Idle

03/26/2023, 2:20 PM
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
c

Chris Sinco [G]

03/26/2023, 6:18 PM
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
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
5 Views
Powered by