How do you change the active-state color?

Questions
1

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

2

Using CSS variables https://framework7.io/docs/list-view.html#css-variables

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

Thanks very much for this. For the benefit of other users I implemented this using the following vanilla JS:

document.documentElement.style.setProperty('--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.

4

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)
}
5

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!