在 Ionic 4.0 中更改离子项目背景颜色

Question

Good day all

I hope no one has asked this yet... I have found some similar posts like this one , but it does not to work for Ionic 4.0. What they suggest here does not seem to work for me, as Ionic 4.0 does not seem to inject the same

<div class='item-content'></div>

element discussed in the linked post.

I am struggling to change the background color of an Ionic 4.0 ion-item element. I am trying to give it a white background whilst the app has a blue background.

I can see in the code inspector that it is applying my style, but it does not show up in the browser.

Here is a sample of my code:

<ion-item class="light-back">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>


.light-back{
    background-color: #fff;
}

Below is a screenshot of what I am looking at, which shows that the element (the search bar) is receiving the style, but not implementing or showing it.

Any advice would be greatly appreciated.

Answer 1

Use this special ionic CSS rule:

ion-item{
   --ion-background-color:#fff;
}

Answer 2

I found the working one in ionic 4. Apply the below 2 css in your .scss file where you have implemented ion-list and ion-item:

    ion-item {
         --ion-background-color: white !important;
    }

      .item, .list, .item-content, .item-complex {
        --ion-background-color: transparent !important;
      }

Answer 3

I seem to have found a fix. You just need to add color="light" to the ion-item element. Please see below:

<ion-item class="light-back" color="light">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>

The problem is that other code gets injected based on my theme, which I set to my primary color from my variables, so I need to indicate that I am again using light theme (which I had already set up to be #fff in my variables).

Hope this helps someone in the future :)

Answer 4

None of the answers worked for me completely although @labago answer works partially.

--ion-background-color only work for static content without any padding or margin. As soon as I start applying padding it is not giving the intended results so below is the workaround I have used in my app:

ion-item {
  padding:20px;
  --ion-background-color: blue;
  background: blue; 
}

Answer 5

This works for ionic 4

1 - Open file: src/theme/variables.scss 2 - insert the code color:

  /** transparent **/
  --ion-color-transparent: #fafafa;
  --ion-color-transparent-rgb: 245, 61, 61;;
  --ion-color-transparent-contrast: #ffffff;
  --ion-color-transparent-contrast-rgb: 255, 255, 255;
  --ion-color-transparent-shade: #dcdcdc;
  --ion-color-transparent-tint: #fbfbfb;

obs: #fafafa correspont to transparent color

2 - open file global.scss e insert the code:

.ion-color-transparent {
    --ion-color-base: var(--ion-color-transparent) !important;
    --ion-color-base-rgb: var(--ion-color-transparent-rgb) !important;
    --ion-color-contrast: var(--ion-color-transparent-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-transparent-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-transparent-shade) !important;
    --ion-color-tint: var(--ion-color-transparent-tint) !important;
}

3 - call the transparent color in ion-item

<ion-item color="transparent">

</ion-item>

Answer 6

If you want to change the background colour of multiple elements in

 <ion-item style="--ion-background-color: rgb(206, 197, 148);">
    <ion-textarea autofocus id="textinput" type="text" value="escribe un mensaje" style="width: 90%; height: 70%;  font-family: 'Gil Sans';"></ion-textarea>
    <ion-icon name='send'></ion-icon>
</ion-item>