0

I am a newbie for Ionic and sass framework.

I am trying add custom colors for my app so i am trying to update ionic.app.scss file located inside scss folder.

So , if i try to override an existing variable say :

$assertive : #F35C6 !default;

it works fine but if i create a custom color say :

$my-custom-color : #F35C6F !default;

It doesn't work . Am i doing it correctly , Please Help!

Thanks.

EDIT :

ionic.app.scss file : 

@charset "UTF-8";
/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;


*/

$my-custom-color : #F35C6F !default;
// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "../www/lib/ionic/scss/ionic";

Usage : 

<label class="item item-input">
  <i class="icon ion-at placeholder-icon my-custom-color"></i>
  <input type="email" placeholder="Email ID">
</label>
Tushar Agarwal
  • 521
  • 1
  • 16
  • 39

1 Answers1

0

When you add custom color variables, that's all it does, it creates a variable. The Ionic colors on the other hand, all have several CSS classes in the Ionic CSS file that takes care of allowing you to use .positive in your view for example.

Here is the CSS for the $positive color from the Ionic source files:

.positive, a.positive {
  color: $positive;
}
.positive-bg {
  background-color: $positive;
}
.positive-border {
  border-color: $button-positive-border;
}

These classes are not created for your own color, by adding these to your own CSS, you can achieve the same behavior.

Dexter
  • 2,462
  • 4
  • 24
  • 28
  • Thanks @Dexter , So what should i do if i want to create my own custom colors tied to custom variables. – Tushar Agarwal Apr 21 '16 at 11:31
  • Just copy what I have posted, create a variable like so: `$custom-color` and replace `positive` with `custom-color` in my example and should be good to go. – Dexter Apr 21 '16 at 12:59
  • What I see here is a variable `$positive: #387ef5 !default;` inside _variable.scss inside ionic library. this in turn create a css (ionic.css) `.positive, a.positive { color: #387ef5; } .positive-bg { background-color: #387ef5; } .positive-border { border-color: #0c60ee; }` can't we achive something like this for `$custom-color` – Tushar Agarwal Apr 21 '16 at 17:24
  • Not automatically as far as I know, they are all predefined in that file. There is no mixin in any of the files to generate those classes. – Dexter Apr 21 '16 at 17:32
  • SASS does that i think .may be you can get an idea with http://robferguson.org/2015/07/07/customising-ionic-with-sass this. – Tushar Agarwal Apr 22 '16 at 09:45