Pretty Header and Pretty footer should take page theme into account

Ideas
1

Currently they are always dark. Could you allow themes to apply to them. too?

2

You can customize them with CSS. You could choose new colors for the inverted colors style. They are only examples that you can personalize to your needs. Here is an example that would allow you to use the navbar-inverse class to have a white menu. Just copy it in pretty-header.css.

.navbar-inverse.custom-header{
  background:#ffffff;
}

.navbar-inverse.custom-header a.navbar-brand.navbar-link{
  color:#292c2f;
  background:#ffffff;
}

.navbar-inverse.custom-header a.navbar-brand.navbar-link span{
  color:#bc40df;
}

.navbar-inverse.custom-header ul.nav.navbar-nav.links li a{
  color:#292c2f;
  background:#ffffff;
}

.navbar-inverse.custom-header .badge{
  color:#ffffff;
  background-color:#2A6A92;
}

.navbar-inverse.custom-header li.dropdown, .navbar-inverse.custom-header li.dropdown.open{
  background:#ffffff;
}

.navbar-inverse.custom-header li.dropdown .dropdown-toggle{
  color:#292c2f;
  background:#ffffff;
}

.navbar-inverse.custom-header li.dropdown .dropdown-toggle:focus, .navbar-inverse.custom-header li.dropdown .dropdown-toggle:hover, .navbar-inverse.custom-header li.dropdown .dropdown-toggle:active{
  background:#ffffff;
  color:#292c2f;
}

.navbar-inverse.custom-header .dropdown ul{
  background-color:#ffffff;
}

.navbar-inverse.custom-header .dropdown ul li{
  background-color:#ffffff;
}

.navbar-inverse.custom-header .dropdown ul li a{
  background:#ffffff;
  color:#292c2f;
}

.navbar-inverse.custom-header .dropdown ul li a:active, .navbar-inverse.custom-header .dropdown ul li a:focus, .navbar-inverse.custom-header .dropdown ul li a:hover{
  background:#ffffff;
}

.navbar-inverse.custom-header .dropdown ul li.active a{
  color:#e9ac09 !important;
}
3

@j444

An explanation why the theme options aren't working for you in this case, is that the theme choices are being overridden by the Pretty Header/Footers.css file. When you select a theme from the app, that loads a modified version of the bootstrap.css which in this case is always going to be overridden by the Pretty Header/Footer.css files.

You would either have to do what @wakoknight suggests or you can directly edit the Pretty Header/Footers.css files in the app and give your own coloring or disabling them by unchecking them. If you uncheck them then they will adhere to the bootstrap theme options if there is a color option for the defined selectors. However, remember though that doing so removes the prettiness of the Pretty Header/Footers.css. :)

Saj

4

If you want it to work with themes, just delete the Pretty-Header.css file. You still need custom CSS for picture size and style, so keep that part.

5

Currently they are always dark. Could you allow themes to apply to them. too? ..

6

I answered that question already. Delete the Pretty-Header.css and Pretty-Footer.css and themes will apply.