How to customize button colors or add new ones?

ionic-v1
1

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: http://ionicframework.com/tutorials/customizing-ionic-with-sass/ vs
Video: http://learn.ionicframework.com/videos/sass/

  • “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 ?!
2

As you said, you can use ionic setup sass to… setup the project using sass, and then edit the scss/ionic.app.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.

3

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:

4

Do you really need to add the watch ?

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

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

Maybe you could just change it a little bit ?

5

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

6

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

vi gulpfile.js

Changed this:

gulp.src('./scss/ionic.app.scss')

To:

gulp.src('./scss/*.scss')

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 http://0.0.0.0:8100
  Running live reload server at http://0.0.0.0:35729
  Changed www/css/app.css
  Changed www/css/ionic.app.css
  Changed www/css/app.min.css
  Changed www/css/ionic.app.min.css