How to style ripple effect?

Ionic Framework
1

Hello,

I’ve added the ripple effect on a div, but how do i style the effect ? what’s the css for it ? I mean the effect comes in a grey-ish shadow, i want to change it to yellow. how to achive that ?

In case needed, heres my project info:

Ionic:
   Ionic CLI                     : 6.16.3
   Ionic Framework               : @ionic/angular 5.6.8

Thanks in advance!

2

Still looking for an answer, if someone could help!

3

Ok, I did it the hard-ugly way :man_shrugging:

I changed the value from the core folder. There are 4 files need to change the value in.

…/node_modules/@ionic/core/components/ion-ripple-effect.js

…/node_modules/@ionic/core/dist/esm/ion-ripple-effect.entry.js

…/node_modules/@ionic/core/dist/esm-es5/ion-ripple-effect.entry.js

…/node_modules/@ionic/core/dist/cjs/ion-ripple-effect.cjs.entry.js

Replace currentColor with your color as string, ‘#30a7aa’ for example. and if you want to change the opacity, you can change it too by searching opacity:0.16 and change the value to the desired one. Also, in the 4 files.

I hope @ionic-team do us a favor and add parameters to do this thing from scss. :ok_man: