What's the quickest way to create a "theme overlay...

# compose

[Colton Idle]

What's the quickest way to create a "theme overlay" in Compose? Like if I want my MaterialTheme, but I just want to swap color primary with Color.Red for example?

[Javier]

Check JetSnack example

[Bradleycorn]

Depends on what you need it for. for example, in our app we use a material theme, but we have one extra color (action and it’s corresponding onAction) … for that, I just added extension properties on Colors to add those, and then I can use them where needed: MaterialTheme.colors.action …

If I need to use it more extensively, I create a CompositionLocal for it, and use that where needed. for example, our app uses “normal” buttons (with primary color) but we also have “action” buttons that use action color. So, I created a LocalButtonColor CompositionLocal that sets the color to use for a button, and then wrote a wrapper around the button Composable that uses LocalButtonColor to set the button color. In my root composable, I use CompositionLocalProvider to provide primary as the LocalButtonColor , and in places where I need action buttons, I use it to provide action as the LocalButtonColor. I think I got that idea from the JetSnack app.

I’ve now run into some scenarios where I need a lot of color changes, so I’m setting up a whole new theme to use in those areas, but it gets it’s colors using MaterialTheme.colors.copy( …) so it’s still based on my main theme with changes as necessary.