Hi,
I want to set the background color for my app but using straight CSS doesn’t seem to work.
Here is what I have tried:
body {
background-color: yellow !important;
}
.ion-content
{
background-color: green;
}
I am sure that this is very simple but I can’t figure it out.
Can someone point me in the right direction?
Thanks,
This post provided some great hints: Setting background for entire app.
I now have the content displaying the correct background color using this CSS:
.background, .background .pane, .background .item, .background .item-complex .item-content {
background-color: yellow;
}
and inserting the background class in the HTML:
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7 background">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
Back
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view class="background"></ion-nav-view>
</body>
What do I need to do to get the header and footer to also display the background color?
Here is what I did to get the footer working:
/* footer */
a.tab-item, i.icon.icon, span.tab-title {
background-color: #566196;
color: #ffffff;
}
Presumably this only works for the tab view.
I can set the header title background but I have not yet been able to set the full header background. There are two vertical stripes on either side that do not have the correct background.
I finally got the header working. Here is the CSS:
/* header */
.bar.bar-stable {
background-color: #7379a3;
color: #f4f4f4;
}
.bar.bar-stable .title {
background-color: #7379a3;
color: #f4f4f4;
}
I figured it out by poking around in the web dev element inspector.
Is there a simpler way?
Yeah there is a simple way. Use Sass.
Thank you. How do I use Sass to do that? Can you point me to some documentation?
shameless sefl-plug
So which variable, if any, in ionic.app.scss controls the background color, so we can change it to suit the app style? or is that variable to be found in a different file? Thanks.
I believe that the default ion-content background is set in the $light variable I’m not sure though! give it a try 
I tried $light, but that does not change the app background. @mhartington, can you please help with your input on this? Where can we find the variable that can be altered to change ionic app background color? Thanks.
Actually the background is hard coded. But it can easily been overwritten to use a variable.
@mhartington, thanks for your quick reply. While I was poking around in the _variables.scss file, I just came across this variable $base-background-color and overriding it in the ionic.app.scss file seemed to do the trick, with the advantage of no additional class required.
Nice! Must have missed that one.
The idea behind my approach is that you can set styles for your ion-contents similar to how you would for buttons and headers. This way you could change them on different views.
Note to others, you can use $base-color for text font
HI @adaptivedev,
But form background become very bad
Know this question was awhile ago, but for anyone else seeing this form backgrounds can also be set using sass
Background sass variables declared in lib/ionic/scss/_variables.scss
$input-bg: $light !default; $input-bg-disabled: $stable !default;
So in your own style.scss, you could either assign those variables directly to your new background color. More correctly, if you’ve changed your background color, you might want to redefine $light and $stable and such since relative to your new darker background these variables’ color probably doesn’t make as much sense any more.
Cheers!
Thanks…
For ionic2 $background-color