Is it possible to override the `.clickable` ripple effect color on the theme level to avoid ```.cli...

# compose

[aipok]

Is it possible to override the .clickable ripple effect color on the theme level to avoid

.clickable(
   interactionSource = remember { MutableInteractionSource() },
   indication = rememberRipple(color = MaterialTheme.colors.secondary),
   onClick = onClicked
)

every time I want to apply theme color?

[Zach Klippenstein (he/him) [MOD]]

It looks like MaterialTheme is what sets LocalIndication, so you should just be able to set that to a different value underneath the theme composable to override it.

[aipok]

Yes, looks like if I’m using following…

MyTheme {
  val rippleIndication = rememberRipple(color = colors.secondary200)
  CompositionLocalProvider(LocalIndication provides rippleIndication) {
    // other compose elements will have proper color for indication
  }
}

But I’m not sure if I have to declare everything what was applied on the MaterialTheme as well. Also the place of this does not look right.

[aipok]

It feels like there should be a property in MaterialTheme to provide ripple config from app theme.

[Zach Klippenstein (he/him) [MOD]]

the place of this does not look right

Looks like what I’d expect.

I don’t know about whether MaterialTheme should make this easier to configure, it seems like material is pretty opinionated about what an official “Material ripple” should look like. I’m guessing this is veering close to building a custom design system for it to make sense for material to support it so directly, but idk.

[aipok]

It could be a specific color definition for example, because this is what you would like to update the most of the time. The concern I have is that I have to define something related to theme outside of the theme. But you definitely right about opinionated part 😄

[len]

You can always define that inside your MyTheme composable so that it's not 'outside of the theme'

[aipok]

I did not found any way to put it there… could you give some sample/hint how to do that?

[len]

@Composable
fun MyTheme(content: @Composable () -> Unit) {
  MaterialTheme(...) {
    val rippleIndication = rememberRipple(color = colors.secondary200)
    CompositionLocalProvider(LocalIndication provides rippleIndication) {
      content()
    }
  }
}

Something like this. I wrote it on the fly but it should look like this

[aipok]

will try it. Thanks.

[Louis Pullen-Freilich [G]]

You can use LocalRippleTheme for this