How do you change the active-state color?

I am using Framework7 Vue and would like to know how to change the active-state colour when my list items are touched, from the default grey to my custom theme tint color. Thanks

Using CSS variables

--f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
1 Like

Thanks very much for this. For the benefit of other users I implemented this using the following vanilla JS:'--f7-list-link-pressed-bg-color', 'rgba(var(--f7-theme-color-rgb), 0.3)');

There might be a better way to do it with Dom7 though.

It is better to just add it to your CSS stylesheet:

:root {
  --f7-list-link-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.3)

Perfect. I did previously try putting this into the Component style but it didn’t work. In the project’s custom CSS file it works perfectly. Thank you!