Ionic sass: Color management

Customizing the ionic standard look&feel of our apps is a very common thing. Ionic css code comes in scss format so as to easily change the color values to some variables and use them through our app. This is a great tool but I find it a little bit strict.

Ioinc scss has a predefined list of colour variables that we are obliged to include in our app although we don’t use some of them. Furthermore, the name of that variables can’t be changed.

I’m not entirely sure if all the colors classes are needed for any ionic app to run, but anyway here comes my proposal.

Normally, when we develope an app we are used to choose our own color style names, and this styles names use to be more particular, like for example “light-red” or “corporate-green”.

Sass gives us the posibility to generate classes dynamicaly, I think it could be a good improvement to restructure the ionic sass colour management.

An empty sass map could be created in the main scss file so that anyone could add his custom “[color_name]:[#value]”. Then a @mixin could read this map and create all the needed classes for each custom colour(e.g. button-light-red, bar-corporate-green…).

The main colors that are needed by the framework could be kept as usual, but this way we would win in flexibility.

I’m not a sass expert… is this posible? Would it add too much complexity to ionic’s scss code?

I may be the only one who sees this need, but I think it’s worth a comment.