CSS Variables in Ionic 4

CSS Variables in Ionic 4



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;






can you share your code in a plunker?

– Muhammad Nadeem
Sep 14 '18 at 6:26




2 Answers
2



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;



Please look at the url ref.



Overriding Ionic Sass Variables



https://ionicframework.com/docs/theming/overriding-ionic-variables/



Sass Variables



https://ionicframework.com/docs/theming/sass-variables/






Yep! I've read both. I thought I was doing what they said, but it is never overwriting. I'm specifically not able to change the color of the selected tab.

– UpsetPopcorn
Sep 13 '18 at 11:55



Thanks for contributing an answer to Stack Overflow!



But avoid …



To learn more, see our tips on writing great answers.



Required, but never shown



Required, but never shown




By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-