How to set background color IONIC 4
AngularIonic FrameworkIonic4Angular Problem Overview
I having problems trying to change the background color in just one IONIC 4 (--type=angular) page. I am trying to add a class for the ion-content. In my html file I Have:
<ion-content class="fondologin">
...
</ion-content>
In my sass I have:
.fondologin{
background-color: #111D12!important;
}
The background color is never changed. If I add --ion-background-color:#111D12; in variables.scss the background is successfully changed for every page but I just one to change the color in one page. How can I achieve this?
Angular Solutions
Solution 1 - Angular
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.
Solution 2 - Angular
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;
}
Solution 3 - Angular
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!
Solution 4 - Angular
You can use like this...working good on my page.
ion-content{
--background: #fff url('../../assets/imgs/intro.png') no-repeat center center / cover;
}
I hope it helps you :)
Solution 5 - Angular
Also works in android deploy, If you need transparency in your background. You must setup like this way, i tried another way but doesn't work, only this way works for me.
ion-content {
--background: rgba(0, 255, 0, 0.5);
}
Solution 6 - Angular
In My Variables.scss file I write this code and then it applies in every file.
ion-content{
--background:#f9f9f9;
}
Solution 7 - Angular
Try this.
ion-content{
background-color: #000000(use your color here) !important;
}
and let me know it is working for you or not
Solution 8 - Angular
It might be you CSS selector that is not enough acurate.
Try this :
ion-content.fondologin{
background-color: #111D12!important;
}
If it is still not working, then inspect your ion-content element and try to find your CSS, and which property or other selector is overriding it
Solution 9 - Angular
Try this one:
:host {
ion-content {
ion-background-color: #d5ffd5;
}
}
//Or
page-name{
ion-content {
ion-background-color: #d5ffd5;
}
}
Solution 10 - Angular
For changing the background on only one page:
ion-content{
--ion-background-color: #00ABE1 !important;
}
Do not forget the !important or it might not work.
Solution 11 - Angular
You can also use a different approach.
Rather than dealing with the ion-content
background directly, just wrap what is inside of the ion-content
and apply the background to the wrapper itself.
Example:
Component.html
<ion-content>
<section class="wrapper">
...
</section>
</ion-content>
Component.scss
ion-content .wrapper {
min-height: 100%;
background: #EBEBEB;
padding-buttom: 10px;
}
Solution 12 - Angular
I have the same problem on Ionic 5
I use this solution based on other answers
in template:
<ion-content class="wrapper">
...
</ion-content>
in global.scss:
:root {
--ion-bg-color: #f5f6fa;
}
ion-content.wrapper {
--background: var(--ion-bg-color) !important;
}
or more simple:
ion-content {
--background: #f5f6fa !important;
}
I also use this post: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Solution 13 - Angular
<IonContent color="primary" > </IonContent>
you can also use "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For adding additional color , please check https://ionicframework.com/docs/theming/colors