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?
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.
Where do I add this class?
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
and a list without a class on the
@brandyshea Where could I change the entire app to have a certain background color? As opposed to setting it manually on every page? Thanks!
you can overrider the ion-content in a css…
example, in the www/index.html you can call a css with
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.
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:
But no such rules exists for md. Instead, this is the style rule that wins (by default):
I would expect a rule like this to take effect:
Is this a missing class or is this by design?
Thanks in advance!