Color theme wrong on iOS vs Android

I created a custom color theme using the Framework7 theme generator.

I entered the primary color of #396B9E then clicked light and fill. Next I copied the generated theme settings to my app’s .css.

I use the status bar plugin and set it’s color to #396B9E. When I build the app, the Android version displays correctly while the iOS version the navbar is not the color I specified as is shown in the following image:


Again, the Android version is correct while the iOS version is not.

How do I fix this so that the iOS version is #396B9E?

Also, as an additional problem, I have several buttons on this page that I have assigned different colors to (color-xxx). When these buttons are pressed they trigger a popup and when that popup is closed the buttons are colored according to the custom theme (#396B9E) and the assigned color is overridden.

How do I fix this?

BTW, these two problems have existed in the last five releases and both show in 5.7.5.


Colors are correct. iOS theme uses translucent navbar (semi transparent) that why you see it a bit lighter. You can disable transparency by passing iosTranslucentBars: false to app parameters

Thanks for that. I’ll make that setting this morning.

What about the overriding of the color-xxx from the popup? How do I fix that?

I can’t imagine how it can override colors, can you show related code?

There are 9 buttons on this page and this happens to all of them. Each button looks like this:

 <button id="emergency" class="alert col button button-fill button-large button-yellow" >Emergency</button>

If you watch the video I sent you, the buttons change color to the new theme when they are clicked/tapped, the popup comes up and when the popup closes, the button color has changed to the default theme color.

This happens on iOS 11, 12, 13 and Android 8, 9, 10 but NOT in Chrome on the desktop (debugging).

There is no such button-yellow class in F7 by default, so i guess it is your custom class where you have changed button color and seems to be in a wrong way.

To change button color correctly you need to use CSS Variables

And it has several, e.g. one for usual state, another one for pressed, etc.

When I duplicate your color-theme layout I get the same exact problem.

.color-dngr-yellow {
  --f7-theme-color: #FFDB25;
  --f7-theme-color-rgb: 255, 219, 37;
  --f7-theme-color-shade: #FFDD36;
  --f7-theme-color-tint: #FFE24F;
.text-color-dngr-yellow {
  --f7-theme-color-text-color: #000000;
.bg-color-dngr-yellow {
  --f7-theme-color-bg-color: #ffdb25;
.border-color-dngr-yellow {
  --f7-theme-color-border-color: #ffdb25;
.ripple-dngr-yellow {
  --f7-theme-color-ripple-color: rgba(255, 219, 37, 0.3);

And FWIW, it’s because active-state NEVER gets removed.