Side Panel Color


Is there a neat way to set the background of the side panels? Obviously I can use custom CSS but I wondered if there was a ready made (un-documented) class that handles color changes for different button states in the side panel?

I know I can add bg-color-blue to the panel > page div but this doesn’t handle the button states.


What do you expect from buttons? To automatically appear them as, for example, white? :slight_smile: No, it is not possible. You can use bg-color-[color] on panel together with color-theme-[another-color] to apply globally color theme for colored elements


Please could you explain color-theme-[another-color], I’ve not come across this in your documentation.
Essentially I’m wondering if there’s a class I can use to control the list link highlight background and text colors in the side panel? I’m using a custom Framework7 export and I’ve set up all the colors I want, is there a class like active-bg-color-yellow or active-text-color-blue?


color-theme-… class is described here and in right preview device you will see what happens when you change it.

There is no classes to change bg color of highlighting, it must be done in your CSS

.ios .list {
  background: red;