Custom colors with Ionic5

Hi,
I’m migrating an app from Ionic3 to Ionic5 by copying the code from the old app to the new and updating the code with the new rules.

Now I have to define some custom colors, I’ve used this code in the file variables.scss:

:root {
	...
	--ion-color-evenItemAcceptedBg: #006600;
	--ion-color-oddItemAcceptedBg:  #006600;
	--ion-color-evenItemPendingBg: #f9bb06;
	--ion-color-oddItemPendingBg:  #f9bb06;
}

I’d like to use these colors in a page.
This code doesn’t work:

<ion-item *ngFor="let pendingDoc of filteredPendingDocuments; let even = even"
		  class="pendingItem"
		  [color]="even? 'evenItemPendingBg' : 'oddItemPendingBg'">

If a use default colors the same code works:

<ion-item *ngFor="let pendingDoc of filteredPendingDocuments; let even = even"
		  class="pendingItem"
		  [color]="even ? 'primary' : 'secondary'">

So which is the correct way to define and use custom colors?

Thank you very much

cld

1 post - 1 participant

Read full topic