[Ionic v4] Changing --ion-color-base has no effect on ion-label

[peterpeterparker]

Ionic Info
@ionic/angular: "4.0.0-alpha.11"

Describe the Bug
Maybe I'm doing it wrongly but setting another --ion-color-base color in variable.scss doesn't seems to change the color of the ion-label

Respectively

:root {
   --ion-color-base: red;
 }

or

 :host {
   --ion-color-base: red;
 }

won't display text in red

Expected Behavior

ion-label once rendered get the following attributes

[data-ion-label-ios-host] {
       color: var(--ion-color-base);
       --ion-color-base: currentColor;
}

I would have expected, but again maybe I'm wrong

 [data-ion-label-ios-host] {
       color: var(--ion-color-base);
       --ion-color-base: red; // the color I defined in my variable.scss
}

[brandyscarney]

Thanks for the issue! So changing --ion-color-base or any of the --ion-color-* variables is not something we recommend. Instead you should be able to change the color an ion-label using:

ion-label {
  color: red;
}

However, I see that this is not working right now. We will look into it!

[peterpeterparker]

@brandyscarney thx for the feedback, glad I did report something useful at the end ;)

P.S.: I tried at first to style directly color but since it wasn't working I thought I should modify variable or something. Good to know I should not

[brandyscarney]

@peterpeterparker Yes, thank you! Your issues are very helpful. 🙂 Please keep them coming! We should have a fix in for this shortly.

[manucorporat]

--ion-color-base should never be used. But we fixed the styling for ion-label, now it should be easier to style an ion-label

ion-label {
  color: red;
}

[peterpeterparker]

Tested, I could confirm the fix in v4.0.0-alpha.12, thx 👍

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.