CODEWITHSUNDEEP
sassionic-framework
Toskan
Toskan

Reputation: 14951

Ionic using different default theme colors / define own custom theme default value?

ok in _variables.scss we have all the definitions. But where can I change away from the setting light ? I want to use, say, royal or dark for all elements.

Do i have to adjust each single element, or is there a single point where I can change that?

e.g.

user royal instead of light everywhere.

Ok to specify, I see that I can change the theme color of a certain theme here

$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;

But where do I set to USE the certain theme colorization? e.g. energized, royal, dark, calm, etc... I want to use something else than light.

Upvotes: 1

Views: 3160

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62871

For many Ionic components (header, footer, buttons, toggles, list items, ranges, spinners, etc) adding a class of ELEMENT-color will change the element to the colors listed in /scss/ionic.app.scss. For example:

<div class="bar bar-header bar-calm">
  <h1 class="title">bar-calm</h1>
</div>

or...

<button class="button button-calm">
  button-calm
</button>

or...

<ion-spinner class="spinner-calm"></ion-spinner>

The above classes will apply the $calm color to the components.

For other elements you'll have to find the variable for the element you want to change the color of and override it. The variables you'll be overriding are in `/www/lib/ionic/scss/_variables.scss'.

You can override any variable in that file within /scss/ionic.app.scss.

For example:

$base-color: $calm;

will change the color of many elements to $calm.

Upvotes: 1

Related Questions