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;
1 Like

Hi there.

Sorry for warming up that topic here but I have an issue with class={panel bg-color-..} at all.

I use the current framework7 and the current framework7 react versions.

I know that there are two ways to set the background color of a panel in react. First is <Panel bgColor=".."> and second is <div className="panel bg-color-..">. Maybe there are other (css) ways.

But neither the first nor the second way is working for me.

Thank you so much! :slight_smile:

What do you have inside panel?

1 Like

Just a List with some links and imgs. I can show you the exact tree tomorrow.