Change background-color of ion-content

This is literally one of the most supposed-to-be simple problem, but hard to apply in Ionic. I guess it’s because of complex structure of Ionic itself, though.

So, I will ask about it again this time.

How do we change the background-color of one particular page in Ionic 2 ?

I have found a way to change the whole page background-color by override it ($background-color) in the app.variables.scss. However, i still don’t get how can we do it to just one page ?

Thank you, please answer if you know already :slight_smile:

Really?

Ok just use this as html, say the component or page is named masters, and it will render a list of pages, that simple:

<ion-content padding class="masters">
  <ion-list inset>
    <button ion-item *ngFor="#master of masterPages" (click)="navMaster(master)">
      {{master.title}}
    </button>
  </ion-list>
</ion-content>

Then in your scss you target the class in the ion-content tag:

.masters {
  background-color: green;
}

Lastly you make sure this scss is being compiled with your app.core.scss by importing it in that same file like:

@import "../pages/masters/masters";

Note: When creating components, pages or whatever with the ionic generate command it will add the class name in the html and create the scss file for you, which means this is the way the ionic team tough about style isolation, just make sure not to name another class in another component with the same name, it’s supposed to be a component class, if needed prefix the class like .admin-masters and/or .client-masters.

12 Likes

Finally someone with a concrete answer!!

That’s it, I’m missing the point where we should import it to app.core.css -_-

Thanks a lot, Sir! God bless!

1 Like

You can simply use the CSS attribute selector to set styles for a specific state.

.pane[state$="tabs.facts"]{
    background: green;
}

I do quite like this a solution, though it may be unconventional (I’m not sure). I have looked around for an “official” way to do this, but I did not find anything (forgive me if I’ve missed this somewhere).

You can also use the $end selector:

.pane[state$="$.facts"]{
    background: green;
}

someone know how to change ion-content background color from an ionic 4 app?

6 Likes

yep. Go to variables.scss and in the root element you can enter the following:

–ion-background-color:dimgrey;

the same goes for the toolbar:

–ion-toolbar-background-color:dimgrey;

6 Likes

Do something like this

// page.scss
ion-content{
–background: red;
}

4 Likes

//put it in your page.scss for what page you want
ion-content{
–ion-background-color:#000;
}

My solution it’s simple:

<ion-content>
  <div class="myClass">

  </div>
</ion-content>

and in your page scss:

.myClass {
    background-color: lightyellow; 
    height: 100%;
    width: 100%;
}

ion-content{
–-background: red;
}
this one is working fine!!

I have tried all the comments,
nothing worked

ionic 4

I found this solution and it’s WORKING

ion-content {
  --ion-background-color: #111d12;
}
2 Likes

In the SCSS:

ion-content{
background-color: red;
}

ion-content {
–background: red;
}

two hyphen before background

It works ! Thank you @alnassreit

its works to me thanks