How do you modify Ionic colors in Meteor?

Question

I'm using the official Ionic package for Meteor. Working directly with Ionic, there is a way to write a SASS theme. How would you do this in a Meteor set up?

Answer 1

1. Add the fourseven:scss package
2. Download this repo https://github.com/nickw/meteor-ionic-scss-import and copy all the files to /client/stylesheets/ionic
3. In your main scss file, import ionic.import.scss: @import "./ionic/ionic.import.scss";
4. Overwrite the colors in _variables.import.scss
5. Go have a beer.

Answer 2

You might want to have a look at how it was done in Meteoric. Although this package is no longer maintained you can reuse the concepts that are used there:

• Use https://atmospherejs.com/meteoric/ionic-sass and https://atmospherejs.com/meteoric/ionicons-sass as prepackaged versions of Ionic SCSS
• Use https://atmospherejs.com/fourseven to make sure Meteor can process SCSS
• To create your custom theme, simply overwrite the variables in _variables.scss in your own stylesheet.

Note that these packages support an older version of Ionic, if you want to use the newest version, you can include it from here in your "style" folder: https://github.com/driftyco/ionic/tree/master/scss