How to set background color IONIC 4

For some reason I solved it this way:

First of all I added --ion-background-color:#ffffff; in the variables.scss file inside theme folder.

In my Page scss I wrote:

ion-content{    --ion-background-color:#111D12;}

After that the background was successful set.

I am going to repost the top commented answer , with an extra explanation

ion-content{    --ion-background-color:#111D12;}

Starting from ionic 4, Ionic component implements the concept of shadowDOM, and the old method of finding css selectors in the component that implements shadowDOM no longer works

As such, any modification can only be made if you change the variable that the component references

for example, if ion content references

--ion-background-color: #ffffff

The only way you can modify the background color is by doing this in your css file

ion-content{    --ion-background-color:#111D12;}

As of March 2020, using Ionic 5, the following is the only solution that seems to work without interfering with the background color of other elements. Place the following code in variables.scss file:

WORKING SOLUTION:

ion-content {  --background: var(--ion-color-primary); // Replace this with color of your choice}

The following solutions don't seem to work properly in Ionic 5.

Example 1:

ion-content {  --ion-background-color: var(--ion-color-primary);}

ISSUE FACED: Using the above code also changes the background color of List Items, Ionic Cards, etc. to primary color. So this makes them look ugly!

Example 2:

ion-content {  background-color: var(--ion-color-primary);}

ISSUE FACED: Using the above doesn't apply the background color at all!

Example 3:

ion-content {  background: var(--ion-color-primary) !important;}

ISSUE FACED: Using the above doesn't apply the background color at all!