[SOLVED] How to change the color of app bar when minimize application?

[mtech]

Hi,

When I minimize the app the top bar of the app is of colour black (with app logo, the name of app and x bar to close an app). Is there a way to change the background colour the same as that of the chosen theme colour?

Regards

[pvtallulah]

Hi,
what do you call "app top bar"
the statusbar? or the navbar?

if you are refereing to the statusbar you can change the color with setBackgroundColor

app.statusbar.setBackgroundColor(hex)
// hex - string - Hex string (#RRGGBB) with background color

https://framework7.io/docs/statusbar.html#statusbar-app-methods

[shastox]

Я так понял что вот это: https://framework7.io/docs/appbar.html

[pvtallulah]

Oh, sorry, didnt saw that.

you can use css vars to change the app bar color

--f7-appbar-bg-color: #your color here;

edit:
this way you can change appbg var with js

function changeColor (color) {
  let root = document.documentElement
  root.style.setProperty('--f7-appbar-bg-color:', color)
}

[nolimits4web]

I believe it is not the Appbar component. Can you give a screenshot of what do you mean?

[mtech]

Here are the screenshots:

1. This is the screenshot with statusbar full screen
   

   

2. Following is the screenshot of the app when the app is minimised. Here you can see the top app bar which is in black color with logo, appname and x to close the app.
   

   

3. Here is the minimised version of the whatsapp and my app minimized. whatsapp app bar is of green color even after minimized.
   

   

[nolimits4web]

You need this cordova plugin https://github.com/tomloprod/cordova-plugin-headercolor

[mtech]

cordova-plugin-headercolor

Thank a lot. You are doing a great job!!