How can I create my own color variables in ionic?

ionic-v1
1

I need to use some new colors in my app for buttons and other stuff. I googled it a lot but couldn’t get any help. Any idea how to achieve this?

2

Hi gowtham_sk,

For using custom css in your ionic application you need to take a help of sass commands.

First of all if you have not setup sass in your application then please setup sass using following command.

ionis setup sass

after that go to /scss/ionic.app.scss file and there you will see all the button classes so at the bottom of the list you can create your own class. For example,

$custom: #8c7373 !default;

add this at the bottom of the list of all the available classes for buttons.

Now after that you need to give class to any button like

<button class="button button-custom">Save</button>

this in your template file.

Hope my answer helps you in fulfilling your requirements.

3

Thank you for response. I already have sass setup in my code. I should have mentioned it before sorry about that. But I couldn’t make it work just by defining custom variables. I have also double checked my index file and everything is fine there too. Do you have any idea what could be the issue?

4

When you have defined custom variable in /scss/ionic.app.scss this file, does your watch is applied on that?

I mean when you made the changes in above mentioned file, does those changes reflected automatically in your www/css/ionic.app.css this file?

This automated process is called compass watch, So is it applied on above mentioned file?

If it is not applying then there is some issues with your sass setup with project.

5

Exactly… changes are not automatically reflecting. Do you have any idea how I can remove and re-do the sass-setup thing so that I can fix this? Thanks

6

Sure,

For re-doing the sass setup you need to do some extra work in your project.

Just open a two terminal windows, first run gulp watch in one window, and in 2nd window run ionic serve command

Now every time you made any change in /scss/ionic.app.scss this file it will going to reflect in your watch and to your application as well.

Hope this will resolve your problem.