https://kotlinlang.org logo
#compose
Title
# compose
n

nuhkoca

04/14/2022, 5:10 PM
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
Copy code
private object MyRipple : RippleTheme {
    @Composable
    override fun defaultColor(): Color = TRTheme.colors.secondaryBlue1

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

Louis Pullen-Freilich [G]

04/14/2022, 5:41 PM
Not sure I understand the question, what isn’t working here?
n

nuhkoca

04/14/2022, 5:59 PM
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.
Copy code
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()
        }
    }
Everything is working as expected on the dark mode but on the light mode I can’t see any ripple
l

Louis Pullen-Freilich [G]

04/14/2022, 6:03 PM
In your code it seems suspicious that you are doing:
lightTheme = false
and
lightTheme = !isSystemInDarkTheme()
These values should be driven by your theme itself
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
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
n

nuhkoca

04/15/2022, 6:05 PM
Thank you! I think I’ve fixed it
4 Views