Ionic change background color of app

Ionic Framework ionic-v3
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?

1 Like
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">:

image
Screen Shot 2016-03-02 at 5.34.14 PM.png375×626 28.6 KB

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

image
Screen Shot 2016-03-02 at 5.34.26 PM.png374×626 28.4 KB

2 Likes
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;
}

2 Likes
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.

5 Likes
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!

9

@brandyshea what demo is that? I’m looking to style lists the same way that the first and last item have the full width borders, but I’m not having success with CSS.