Setting background for entire app


#1

Is it possible to set the background color for the entire app to for example “stable” ?
I tried editing the $light variable with SASS but this doesn’t change borders and menu’s for example.
I noticed that ionic has stable-bg and stable-border but I can’t figure out how to make them work yet.


#2

The variables, stable bg, and stable border and for setting the background colors and borders for bar elements; headers, footers, tab bar.

There isn’t a built in way to set a background colors and such to the entire app. Most of that would be custom css that you would write to set a brand for your own app.


How do i set the background color for my app?
#3

Ok, too bad, I’ll do that. Thanks!


#4

I also tried to do this globally. It wasn’t a good idea. In some view, I actually did just want the default Ionic looking and feel. Others, I wanted customized.

So, I just created a class for those views that needs branding. Like this:

<ion-view title="navTitle" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true" class="bubble-background">

FYI : Still using VERY old Ionic code.


#5

Thanks, I used this code:

.background, .background .pane, .background .item, .background .item-complex .item-content{
    background-color: #f7f8fa;
}

<ion-nav-view class="background"></ion-nav-view>

#6

I know I’m a little tardy
I had attempted to write an new class of .tabs-accent { background-color: $theme-accent !important; }, but got nothing. I wrote new classes for [x]-bg, [x], and item-[x] and these styles took. However, I inspected within my browser and lo and behold the tabs-accent class never got passed down from the <ion-tabs> component to its rendered child div.tabs element. So, like a nincompoop, I’m resorting to changing the default values for my color classes inside of ionic.app.scss.

Hope this saves some poor [potential nincompoop] soul a lot of time.