Software Archive
Read-only legacy content
17061 Discussions

Changing default ionic colors? (SASS/LESS)

Bülent_Ö_
Beginner
552 Views

Hi,

I'm pretty new to mobile development and Intel XDK. I used to use Bootstrap and LESS for my web projects in the past years.

To start with, I've chosen ionic/angularjs environment and started to learn. I have lots of problems with the XDK implementation when I don't use the App Designer, but I'm working on it.

My current question is about changing the default colors of ionic (positive, balanced, etc). I could not find any SASS or LESS document where these are defined (a version of default _variables.sass file in ionic). There are only the ionic(.min).css files.

What is the correct method for changing these colors in a LESS manner (as far as I can see XDK uses LESS). Even, how can I implement different skins in my project?

Thanks in advance...

 

0 Kudos
3 Replies
PaulF_IntelCorp
Employee
552 Views

The simplest way to override the CSS that App Designer uses is to define additional CSS rules that augment the default rules and either assign them as !important or make them more "specific" using standard CSS cascading rules. If you are using LESS, you should set the resulting CSS file that you generate to be the last one imported in the index.html file. You can safely add lines in the head section of the index.html file and it will not disrupt your App Designer code in the body section.

0 Kudos
Bülent_Ö_
Beginner
552 Views

Thanks a lot Paul, this clarifies my suspects :( Way to go "blue" :)

0 Kudos
Henrique_M_1
Beginner
552 Views

Hello,

Could someone post a quick recipe on how to do this?

0 Kudos
Reply