CSS Variables in Ionic 4

Question

I am trying to change the color of the icon in the selected tab and am really struggling with how to overwrite the variable.

I'm doing the following:

 ion-tabs {
    --color-selected: #ff7800 !important;
    --ion-color-contrast: #ff7800 !important;
}

Answer 1

I figured it out! It looks like --ion-color-contrast stems from the original them that you've applied to the component, in my case "dark". So I actually need to overwrite --ion-color-dark-contrast as follows:

 ion-tabs {
    --ion-color-dark-contrast: #ff7800 !important;
}