Hello, how can I provide 2 different ripple colors...

# compose

[nuhkoca]

Hello, how can I provide 2 different ripple colors depending on the actual theme? I tried to implement my own RippleTheme but didn’t understand how it works

private object MyRipple : RippleTheme {
    @Composable
    override fun defaultColor(): Color = TRTheme.colors.secondaryBlue1

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleTheme.defaultRippleAlpha(
        Color.Black,
        lightTheme = !isSystemInDarkTheme()
    )
}

[Louis Pullen-Freilich [G]]

Not sure I understand the question, what isn’t working here?

[nuhkoca]

Hey Louis, sorry wasn’t clear. I’d like to have a different ripple color per theme but it is not working for light theme. I mean I can’t see ripple color upon touch. It is a little bit opaque color but at least I need to see it clearly right? I tried below but it is not working.

private object IconButtonSmallRipple : RippleTheme {
    @Composable
    override fun defaultColor(): Color = RippleTheme.defaultRippleColor(
        contentColor = TRTheme.colors.primaryBlue2,
        lightTheme = false
    )

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleTheme.defaultRippleAlpha(
        Color.Black,
        lightTheme = !isSystemInDarkTheme()
    )
}

 CompositionLocalProvider(
        LocalContentColor provides iconTint,
        LocalRippleTheme provides IconButtonSmallRipple
    ) {
t = iconTint, enabled = enabled, onClick = onClick, content = content)
        IconButton(
            onClick = onClick,
            enabled = enabled
        ) {
            content()
        }
    }

[nuhkoca]

Everything is working as expected on the dark mode but on the light mode I can’t see any ripple

[Louis Pullen-Freilich [G]]

In your code it seems suspicious that you are doing:

lightTheme = false

and

lightTheme = !isSystemInDarkTheme()

These values should be driven by your theme itself

[Louis Pullen-Freilich [G]]

In dark theme, defaultRippleColor sometimes uses Color.White - so that might be what is happening here, because you have set lightTheme = false all the time, it will try to use a white ripple, on a white surface

[Louis Pullen-Freilich [G]]

To debug I would recommend explicitly not using the default functions, and just doing your own thing. The default functions are really more just the Material defaults, but it doesn’t necessarily make sense for every custom theme

[nuhkoca]

Thank you! I think I’ve fixed it