3

It is easy to change the background color of an Ionic App by setting $background-color in variables.scss, but it wont work with gradients or images. I was surprised that I could not find any official documentation on this, nor a lot of useful questions and answers.

If you set $background-color to a non-color you will currently get a Sass error from one of the many Ionic components that calculate their colors based on the background color.

sebaferreras
  • 44,206
  • 11
  • 116
  • 134
Zoon
  • 1,068
  • 2
  • 11
  • 26

1 Answers1

8

So here is what I ended up doing, first in src/theme/variables.scss:

$app-background: linear-gradient(to bottom, color($colors, light) 0%, color($colors, dark) 100%);
$background-color: transparent;
$toolbar-background: transparent;

The normal background and toolbar must be transparent to show the gradient underneath. We apply the gradient in src/app/app.scss:

ion-content {
    background: $app-background;
}

You may think that ion-content only takes up the space between your header/navbar and footer/tabs, but is actually styled by Ionic to fill the entire screen. So you got your gradient from top to bottom. Success.

Zoon
  • 1,068
  • 2
  • 11
  • 26