How to add a new color to <ion-item> in Ionic 4+?

Ionic Framework
1

I am able to specify the color of an <ion-item> below:

<ion-item color="primary-contrast">

But instead of using one of the default colors, I want to use a particular hexcode.

How do I add this new color to the <ion-item>?

Do I have to add it to my variable.scss file, & if so, how? Thanks a lot!

2

To add a new color, first define the CSS variables for all of the variations of the color at the root. For example, to add a new color called favorite , we can define the following variables:

:root {
  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105,187,123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255,255,255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;
}
3

Thanks for your reply.

I created a new color like so in variables.scss:

:root {
  --ion-color-me: #5260ff;
  --ion-color-me-rgb: 82, 96, 255;
  --ion-color-me-contrast: #ffffff;
  --ion-color-me-contrast-rgb: 255, 255, 255;
  --ion-color-me-shade: #4854e0;
  --ion-color-me-tint: #6370ff;

But when I try to reference it like below, nothing is changing:
<ion-item color="me-contrast" lines="none">

To verify that I was able to use the variable values correctly, I tried to use <ion-item color="primary-contrast" lines="none">, and that changed color as expected.

I’m not sure what I’m doing wrong

4

After add the new colors, you need to create a new class to use these colors:

  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105,187,123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255,255,255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;

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

And then use it:

<ion-button color="favorite">Favorite</ion-button>
6

Yes, in the same file: theme/variable.scss, inside :root {}

7

I’ve done this, and color="favorite" is working, but if I try to use color=“favorite-tint”, it isn’t working.

Why is this?

8

Each color consists of the following properties: a base , contrast , shade , and tint . The base and contrast colors also require a rgb property which is the same color, just in rgb format. See The Alpha Problem for an explanation of why the rgb property is also needed.

Check it out: Ionic CSS Color Component: Style or Change Default App Colors