Ionic 4 color attribute in custom components

Question

We are doing custom components in ionic 4, we want it to have ionic attributes like the color attribute to affect its internal ionic components ... Any hint about how can this be done ? , without doing regular binding like `[color]=" 'blue-lagoon' "

Answer 1

To do this is easy...

In this tutorial are all the information.

But in summary you need to do this steps:

1.

Go to this page, here you find a color generator of ionic, you can use the primary color section, put your hexadecimal color and below is generated the code to that color:

For example ill use #5e3f53 so the code generate it will be:

--ion-color-primary: #5e3f53;
--ion-color-primary-rgb: 94,63,83;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #533749;
--ion-color-primary-tint: #6e5264;

2.

Now on go to file src/theme/variables.scss and paste inside :root{}

--ion-color-myCustom: #5e3f53;
--ion-color-myCustom-rgb: 94,63,83;
--ion-color-myCustom-contrast: #ffffff;
--ion-color-myCustom-contrast-rgb: 255,255,255;
--ion-color-myCustom-shade: #533749;
--ion-color-myCustom-tint: #6e5264;

3.

and then go to the file src/global.scss and paste the following code:

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

4

Now you can use your custom color wherever you want, obviously with the name that you define it.

And that's it.

Or if the color property is not allowed that I guess is your case for your post, create a class, id or style.

and can use your color with this way:

I hope I've helped :)