How to customize button colors or add new ones?


How can I add new button colors ? and where should I place it ( in my style.css or ? )

I’m not sure if adding them to www/lib/ionic/css/ is the right way …

EDIT: found a tutorial on your website, but I’m really confused
Doc: vs

  • “ionic setup sass” doesn’t appear in the doc
  • sass --watch scss/app.scss:css/app.css, running this creates “css” dir in the root level ?!


As you said, you can use ionic setup sass to… setup the project using sass, and then edit the scss/ to edit existing colors.

To find examples of the sass code used, you can open the www/lib/ionic/scss/_variables.scss file to find what already exists.

I don’t know if it answers your question but well… that’s how I do.


Since I just wanted to add button colors on top of what Ionic already have - this is what I did:

$ ionic setup sass    
# in the directory "scss" that was created I added a file "app.scss" and converted to CSS:
$ sass --watch scss/app.scss:www/css/style.css

And then just added “style.css” to the index.html.
Is this also an acceptable way ? or I missed the point here :smile:


Do you really need to add the watch ?

Take a quick look in gulpfile.js and you will find this :

gulp.task('watch', function() {, ['sass']);

Maybe you could just change it a little bit ?


ohhh you right, I can also add it the to “task” section where it shrink it as well :slight_smile: Thanks !


Thanks for the help !
Eventually this is what I changed:

vi gulpfile.js

Changed this:




Then starting ionic:

$ gulp sass     # not sure about this one, but what the hell ... nothing worked before that ..
$ ionic serve
  Running serve task...
  Running dev server at
  Running live reload server at
  Changed www/css/app.css
  Changed www/css/
  Changed www/css/app.min.css
  Changed www/css/