CODEWITHSUNDEEP
javascriptangularionic-framework
Nazehs
Nazehs

Reputation: 558

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

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

Upvotes: 2

Views: 3653

Answers (4)

Chris
Chris

Reputation: 109

In ionic v6 Beta1 this worked for me:

ion-content {
  --ion-background-color: red;
}

Upvotes: 0

Awad Haj
Awad Haj

Reputation: 629

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

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

Upvotes: 4

Hecham Al Sayed Ahmad
Hecham Al Sayed Ahmad

Reputation: 13

you have to try this code on page.scss 

ion-content {background: #f1453d !important; }

Upvotes: 0

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

Try this.

.contents {
  background: #f1453d;
}

Upvotes: 0

Related Questions