Ionic change background color of app


#1

When I was looking at the ionic docs I saw under sliding lists that the background color of the app was grey instead of white. I was wondering if anyone can help me change my app background from grey to white?


#2

The background color of the app is white by default. Some of the demos have a class added to them called outer-content which gives the grey background.


#3

Where do I add this class?


#4

It is added to the outer-content to give the grey background. If you want a white background, don’t add this class. For example, a list with <ion-content class="outer-content">:

and a list without a class on the ion-content:


#5

@brandyshea Where could I change the entire app to have a certain background color? As opposed to setting it manually on every page? Thanks!


#6

you can overrider the ion-content in a css…

example, in the www/index.html you can call a css with

ion-content {
background: #000000;
}


#7

I solved the problem by changing the background color for each platform in the app.variables.scss file. Just setting $background: #fff does not work because the $background class is inherited by many Ionic components, thus changing the background of almost everything instead of just Content.

This is how did it:

$background-ios-color: #fff;
$background-md-color: #fff;
$background-wp-color: #fff;

The scss documentation was very helpful.


#8

Thanks for this!

One question: Does this .outer-content class work for md platforms? Adding this class works great on iOS, but does not seem to work for md.

I see that this rules applies for ios:
.content-ios.outer-content {
background: #efeff4;
}

But no such rules exists for md. Instead, this is the style rule that wins (by default):
.content-md {

background-color: #fff;
}

I would expect a rule like this to take effect:
.content-md.outer-content {
background: #efeff4;
}

Is this a missing class or is this by design?

Thanks in advance!