I have an `IconButton`, with an `Icon` inside, but...

# compose

[Colton Idle]

I have an IconButton, with an Icon inside, but the icon is dark and so the dark touch ripple is kind of hard to see. Is there any way to inverse that somehow so the touch ripple brightens up the inner Icon?

[Louis Pullen-Freilich [G]]

Are you setting content color correctly? That is what ripple uses for its color

[Colton Idle]

Hm. I'm not sure how I'd do that. I don't see any arg for contentColor (but I'm assuming that I'm misunderstanding what you're saying here)

[Louis Pullen-Freilich [G]]

Well, icon by default uses content color - so if you are explicitly setting a color for the icon that isn’t using the default content color, you should set this color via content color instead

[Colton Idle]

Alright. I'll try to look up how to do that

[Louis Pullen-Freilich [G]]

Well it kinda depends on what your code looks like. In the general case, content color should be set by the ‘parent’. I.e, if you are in the button, the button will set a value for content color based on its background. Same for an app bar

[Louis Pullen-Freilich [G]]

So whatever the parent of the icon is, should already be setting a color, and ideally that color should be used for the ripple as well

[Louis Pullen-Freilich [G]]

Otherwise you’ll need to explicitly use:

CompositionLocalProvider(
        LocalContentColor provides myIconRippleColor) { ... }

[Colton Idle]

Interesting. I will try to play around with this when I'm back at my laptop.

In a gist, I basically have
IconButton{
Image() //image is dark
}

[Louis Pullen-Freilich [G]]

Ok, if it’s an actual image that already has a color (i.e doesn’t use the theming system), then yeah, you should just explicitly set content color around the icon button to configure the ripple color

[Colton Idle]

Gotcha. Any "trick" to make sure I use the proper light colored ripple?

[Louis Pullen-Freilich [G]]

What do you mean by ‘proper’? At this point you’re already outside of the expectations of the Material theming system, so you’ll need to pick a suitable color I guess

[Colton Idle]

I just know some things in material are just simply "take your color and .copy(alpha=.2f)

[Colton Idle]

But understood that it's out of the bounds of material and I need to handle it myself. Thanks for the pointers 🙏

[Louis Pullen-Freilich [G]]

The alpha is already handled separately, you just need to provide the ‘raw’ color to which alpha will be applied. Probably just Color.White is fine in your case, if its’ a dark image

[Colton Idle]

Thank you ❤️