question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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
}

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
peterpeterparkercommented, Jul 24, 2018

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

1reaction
brandyscarneycommented, Jul 23, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Ionic v4] Changing --ion-color-base has no effect on ion-label ...
However, I see that this is not working right now. We will look into it! All reactions.
Read more >
ionic 4 change ion label color when focused within ion item
I am able to change the highlight color of ion-item using --highlight-color-focused: yellow; but unable to change the label color. img 2. It...
Read more >
Item Label Color and Properties for Applications | ion-label
Easily design item label colors and other properties with ion-label. ... The position of the label inside of an item can be inline,...
Read more >
Ionicons Usage Guide
Color. Specify the icon color by applying the color CSS property on the ion-icon component.
Read more >
Ionic 5 UI Components Properties - Appery.io
This property converts the button to an icon by changing its Style property ... the label style will match corresponding point style (size...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found