How to change the background color of a single page in ionic 3+

3.5k views Asked by At

enter image description hereI am new to ionic and i have been trying to change a single page css like changing the background color to be something else. like green or so. i am aware i can change the same globally and i don't want to change the background color globally i want it to be only on this single page.

I have tried the below but it seems not working.

I have tried searching but i am not finding anything fitting my need

//page source code

<ion-content class="contents">
     sample text goes here 
</ion-content>

.contents{
  background-color:red;
}
ion-content{
  --background-color: var(--ion-color-danger, #f1453d);
}

the background should give me a red color for that page but it's not effecting the change

4

There are 4 answers

0
Chris On

In ionic v6 Beta1 this worked for me:

ion-content {
  --ion-background-color: red;
}
3
Sudarshana Dayananda On

Try this.

.contents {
  background: #f1453d;
}
0
Hecham Al Sayed Ahmad On

you have to try this code on page.scss

ion-content {background: #f1453d !important; }
0
Awad Haj On

I faced this problem and tried ALL solutions mentioned here, and finally solved it by this:

<ion-content style="--background: #f1453d;">