Ion-header and ion-footer with different background colors

Ionic Framework ionic-v3
1

In our app we have an ion-header and an ion-footer with a blue background for the header and an orange background for the footer for branding purposes. I set the background color using:

$toolbar-background: $blue;

Then I overrode the color in the footer with the following SCSS:

ion-footer, ion-toolbar {
    ion-title{
        text-align: center;
        background-color: $orange !important;
    }
}

This works when using ionic serve in Chrome and on IOS but on Android it renders like the image below. Does anyone know a way around this?

29
Screenshot 2018-04-30 13.08.29.png752×69 8.54 KB

2

Try using a theme: https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/



.ios, .md, .wp {

  .orange-theme {

    $colors: (
      primary: $orange,
    );

    ion-header {
      background-color: map-get($colors, primary);
    }

    ion-navbar {
      background-color: map-get($colors, primary);
    }

    ion-searchbar {
      background-color: map-get($colors, primary);
    }

    .toolbar-background {
      background-color: map-get($colors, primary);
    }
    .toolbar-title {
      color: $white;
    }

    ...

  }

}