How does Jetpack Compose work with the Android system's dark mode toggle? As I understand, dark mod...

# compose

[adjpd]

How does Jetpack Compose work with the Android system's dark mode toggle?

As I understand, dark mode is enabled with a boolean passed into the generated MyAppNameTheme.

But that boolean doesn't seem dependent on the Android system's dark mode. Am I missing something?

[Chris Sinco [G]]

There is a function isSystemInDarkTheme() which is the default value for the MyAppNameTheme from the project template

[Chris Sinco [G]]

That makes an internal call that maps to the state of the Android system

[Chris Sinco [G]]

The boolean in the theme composable is not tightly coupled with the Android system state in order to give you flexibility for when you want to switch to dark theme, e.g. users may want to do that only on your app and not the whole OS

[adjpd]

Yeah. I'm thinking about when the user does it in the system. It should be reflected in the app imo.

[Chris Sinco [G]]

Sure. That function above should work then. You can call that in various places in your Compose hierarchies if need be.

[Chris Sinco [G]]

If you want the app to always reflect the device, the template code for MyAppNameTheme should work for you

[adjpd]

I'd like to watch for changes for that property, then change the compose theme, as long as the user wants the compose theme to reflect the system theme. I'm not sure if you can watch for changes in that property, however.

[Chris Sinco [G]]

I see. What does your code look like for MyAppNameTheme? If you are using isSystemInDarkTheme , the Composables you have that are wrapped in MyAppNameThem should automatically recompose since the system change will trigger the recomposition.

[Chris Sinco [G]]

as long as the user wants the compose theme to reflect the system theme

Will you have a user app setting for this?

[adjpd]

Yeah

[adjpd]

Ah, it will auto reconfigure, will it? Hmm. Good to know. Thanks Chris!

[Chris Sinco [G]]

It should assuming MyAppNameTheme is towards the very top of your app UI hierarchy. Here is a screencast with the Layout Inspector showing the full hierarchy of the screen. Everything below MyTheme should recompose to dark theme.

Screen Recording 2021-08-26 at 11.45.40 AM.mov

[Colton Idle]

I have an app that's supposed to be dark theme by default. Anyone know how I'd handle that?

[Chris Sinco [G]]

I think you’d just set your theme to dark == true. Or always pass dark colors. And then have some logic around checking the user app setting versus the system

[Colton Idle]

Ah true. I guess I was overthinking it.

Just set it to true, and then probably expose an option backed by shared prefs for dark, light or follow system. 👌

[Chris Sinco [G]]

Yep exactly

[Chris Sinco [G]]

MaterialTheme on its own doesn’t have any awareness of the dark theme in Android. The recommended pattern is to wrap it in your own Composable, e.g. MyTheme , and then switch the colors based on your business logic

[Chris Sinco [G]]

Like here (from the new project template) - you can change the conditions and color values you pass based on your needs

[Chris Sinco [G]]

As opposed to an app like the Jetcaster sample where there’s only a dark theme. So it only uses one color scheme and has no logic to switch them out

[Colton Idle]

Thanks. I've still never had to implement dark theme and so I'm pretty ignorant to all of that stuff. That changes today!

[Chris Sinco [G]]

No problem! Definitely do check out dark themes though - they are lovely