Hi! I find myself needing to specify background and foreground colors for every component in order t...

# compose

[Francois Morvillier]

Hi! I find myself needing to specify background and foreground colors for every component in order to have the Dark Theme properly applied. This feels like too much work. Is there a better way?

Card(backgroundColor = MaterialTheme.colorScheme.surface) {
    Text(text, color = MaterialTheme.colorScheme.onSurface)
}

Is there a good guide to best practices on the topic?

[CRamsan]

You can set the colors directly into the Theme you are using. Then your components can get the colors from there:
https://developer.android.com/jetpack/compose/themes/material

[Francois Morvillier]

I'm using MaterialTheme from androidx.compose.material3. Is that the issue?

[Kirill Grouchnikov]

These components should be getting the correct default M3 colors under light and dark mode without you having to specify them explicitly - unless you want to change the palette entries to use. Perhaps you're not applying dark mode correctly. How are you switching to dark mode?

[Francois Morvillier]

setContent {
  CompositionLocalProvider(
        LocalNavController provides navController,
        // ...
    ) {

        MyTheme(darkTheme = LocalUiSettings.current.darkMode.collectAsState(initial = false).value) {
            Scaffold( ... ) {
                // everything goes here
            }
       }
}

[Chris Sinco [G]]

I find myself needing to specify background and foreground colors for every component in order to have the Dark Theme properly applied.

Where are you seeing issues where the dark theme is not being applied to your expectations? On device and/or in Previews?

[Chris Sinco [G]]

Also looks like you are toggling dark theme based on a local app user setting correct? Does that have any tie in to the state of the system, i.e. androidx.compose.foundation.isSystemInDarkTheme() ?

[Chris Sinco [G]]

As folks mentioned, you should not need to be explicitly setting theme colors to all your components, especially ones from the Material library and Text/Icon, as those are already wired up to use MaterialTheme values and CompositionLocals like contentColor

[Chris Sinco [G]]

The theme color mapping is needed for custom components, like setting background color of a Box/Row/Column via Modifiers if you don’t want to inherit the background of its parent.

[Francois Morvillier]

The issues I'm seeing are on device. I don't use Previews.
Indeed I am using local app user settings and not the system wide setting at the moment. The toggling works fine but I have to specify colors for each component otherwise I get the light theme by default. I do believe the issues started when I switched to material3 but I didn't realize it at the time.

[Kirill Grouchnikov]

The way you're using dark mode switch is probably not the way Material 3 theme wrapper does.

[Francois Morvillier]

I think I now understand: only the material3 composables work with Material 3 theming. I didn't realize all the components had been duplicated.

[Chris Sinco [G]]

Yes, the Material components have defaults that map to MaterialTheme in their implementation. For custom Composables, outside of contentColor for Text/Icons, you will have to map the MaterialTheme keys manually

[Chris Sinco [G]]

I didn’t realize all the components had been duplicated

Could you elaborate?

[Francois Morvillier]

Could you elaborate?

Text, Card, Surface etc. each have a version in androidx.compose.material and in androidx.compose.material3. In my tests only the later respond automatically to the material 3 theming which makes it unfortunately unwieldy to switch back and forth from material to material 3 theming.

[Chris Sinco [G]]

I see. Yeah if you are using a mix of Material2 and M3 components, managing themes between the two is quite cumbersome right now. This is something the team is working on resolving before Material3 goes to beta. Essentially, one should not have to depend on multiple versions of Material libraries in the stable future.

[Chris Sinco [G]]

But until then, that is unfortunately the state of things if you are using the Material3 alpha libraries in Compose

[Francois Morvillier]

I see. I'm trying to assess if I should continue trying to use Material 3 for my app (I plan to release later this year) or just revert to Material 2. I'm missing TextField in particular with Material 3. I can afford to wait a couple months before a I sort all this out. Any advice?

[Chris Sinco [G]]

It’s unlikely the Material3 library will hit beta in a couple months, so to be safe I’d go with the Material2 library if you are releasing the app to production. But it depends also how much you want to use Material3 and why, like for dynamic colors, new components, etc, that are not available in Material2.

[Francois Morvillier]

My main motivation to use material 3 was anticipating future changes and benefiting from the slightly improved color definitions (such as tertiary). Thanks for all your answers!

[Chris Sinco [G]]

You’re welcome!