I have an app that uses a Material theme in light ...

# compose

[Bradleycorn]

I have an app that uses a Material theme in light and dark variants … pretty standard stuff. The light theme uses a white surface color and a pretty dark (navy blue) primary color. So far so good…
However, we have a few screens (formerly fragments) where the design calls for the color scheme to be inverted. That is, the dark (navy blue) color is used for the background (surface) and the content (text, textfields, etc) is white. I’m wondering what is the best way to deal with this? At first, I created a DarkSurface composable that wraps a surface and sets up some CompositionLocals to handle the color inversions. But the more I go down that path, the more cumbersome and wrong it seems. Now I’m wondering if I should create a new theme for these screens to use. Anyone else ran into something like this before and have any ideas on how to handle it?

[Colton Idle]

Funny. I didn't read your question before posting my question below... but this seems awfully reminiscent of theme overlays IMO.

[Colton Idle]

@nickbutcher explains this masterfully here (timestamped for your convenience)

https://youtu.be/Owkf8DhAOSo?t=500▾

but I do believe that themeoverlays aren't really a thing in compose and instead you basically just duplicate a theme and just apply your single change (which is what my question below is asking, because I'm trying to do this currently but failing. lol)

[nickbutcher]

You can nest themes. See this sample which has a Pink theme at the root of the screen

https://github.com/android/compose-samples/blob/main/Owl/app/src/main/java/com/example/owl/ui/course/CourseDetails.kt#L122

But then sets a Blue theme for a section of the UI

https://github.com/android/compose-samples/blob/main/Owl/app/src/main/java/com/example/owl/ui/course/CourseDetails.kt#L300

[Bradleycorn]

@nickbutcher Yep, that’s the path I’m going down now, thanks for the examples. It seems much more “correct” than creating a bunch of CompositionLocals and a wrapper composable to set them to provide colors. That got to be a mess fast.