how do I overwrite existing color such as royal or balanced?
1 Like
its not working⌠hmm
/*
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;
*/
$calm: #FF4081 !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";Open your console, path to your project and run âionic serve --labâ then make the change, save the .scss file and see if it doesnât reload the compiled css.
You prob changed the file and donât have the tasks running that will compile the .scss file into the .css files you actually need to use the â.calmâ class in your Ionic app.
hmm I tried to create
.supercolor {
color: #fff;
background-color: #eee;
}
and used it on my bar
class=âsupercolorâ
not workingâŚ
or either with .clam
Is the .css file included in your index.html that has this class. Post a screenshot from your IDE of index.html and the .css file.
1 Like
Okay, itâs been awhile since you originally posted and I think youâve changed paths here on what you are wanting to achieve.
Do you want to override the default Ionic .css classes (calm, positive, etc) or make your own and apply it?
Personally, I would overwrite the Ionic .css class in the .scss file and not do your own. Then it will be applied globally to your app and you wonât have to generate more css classes to keep track of that could cause inheritance conflicts on other elements in your app.
If you donât understand what the .scss file is then let me know, because it will work with the code you added but it has to be compiled into .css before it actually takes effect. When itâs compiled it actually overwrites the classes in your âlib/ionic/css/ionic.cssâ file (or it should).
1 Like
Hi Brad,
Yeah, Iâve never had exp with .scss before, so If I change my scss like below,
/*
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;
*/
// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;
$royal: #fff !default; // changed part to overwrite!!
// Include all of Ionic
@import "www/lib/ionic/scss/ionic";
and how would I compile this into .css in order to take effects??
This image is from my IDE (Visual Studio), on the far right is my project folder, I have the .scss file open with my overrides for the ionic .css classes and you can see Iâve overwritten: $positive, $calm, $balanced. The file on the right is what generated once it compiled to the ionic.app.css file, youâll notice the background color on the .bar-positive class is the value I have used in the .scss file. That is what should happen when you compile the .scss file.
So my guess is that you made the change but werenât running the gulp tasks to have it compile into the .css you need.
When I first started working with Ionic and using SASS/LESS, I was confused a lot 
so no worries if you donât get it. It took me some time to figure out how it all works together, Ionic does a lot of this for you so you donât have to worry about it so I had to go outside of Ionic to learn and understand what Gulp, SASS, LESS all do.
If you have the Ionic CLI installed then good, if not then you need to install it on your computer. Once you have the Ionic CLI.
Youâll need to open your node.js command prompt (not sure if it works with Macâs terminal or Windows command prompt), then path to your project and run one of the Ionic commands to compile it. I always run âionic serve --labâ when I develop and in the background GULP will be watching your .scss file and compile it as you save any changes. If you donât do this currently, take the time to learn it and youâll be amazed at the efficiency this can provide.
I always used âionic run ios --device -l -câ to run in on my device and change it realtime.
maybe â-lâ live command was refusing the run the gulp command that will compile the scss into css?
I am running without -l nowâŚ
You should see some output in the console if you change the .scss file telling you that the ionic.app.css file has been changed.
hmm i donât see that in the output when I change .scss file and save.
btw I am using sublime3 in OSX
Okay, then we at least know itâs not compiling it. So now to figure out whyâŚ
You need to setup sass for your project in your CLI
ionic setup sass
Then add ionic.app.css in your index.html
Your changes to ionic.app.scss would never had worked as theyâre commented out 
/*
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;
// 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â;
HTH
1 Like
Completely forgot about the âsetup sassâ command. Good catch.
1 Like