Style Ionic components without use color attribute?


I need to set colors of some Ionic 2+ components but don’t want to use color attribute. By using color attribute I would need to overhide colors array in the variables.scss which would increase too much the size of my css.

For example, I need to set pink color in an active ion-toggle just when it have a pink css class.


You can add new colors for the variable.scss file you want.


darkp is the color I already added.


osithIONIC, as I said I don’t want to add colors to the color array.

This causes the css file size to increase too much.


Then you better try for inline scss.


You can bind [style.color] and [style.background-color] and [style.whatever].


You don’t understand guys. Some components are very complex to style. For example, a toggle deseves to create css for each platform and internal html of the component.

Inline styles or binding styles are not enough.


So the color attribute handles all the complexity of styling components that you don’t want to do yourself, but you don’t want to use it either. Sounds like you’re asking for something logically impossible.


No! My solution was to write my own css for each component of Ionic which I wish to change instead of use color.