CODEWITHSUNDEEP
angularionic-frameworksassionic2
Kevin Shi
Kevin Shi

Reputation: 516

How to programmatically set variables in Ionic's variables.scss?

Ionic comes with a variables.scss file, and in there you can set up different style variables such as primary colours, etc.

Is there a way I can programmatically change variables inside of here?

$colors: (
  primary: #ffbb00,
  secondary: #32db64,
  danger: #f53d3d
);

For example: changing the primary color to the result of a color picker

Upvotes: 2

Views: 2518

Answers (1)

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

So I got curious and was looking around to see if I was able to find a solution, so here's what I got:

You can't change the SASS variable since it's compiled and turned into css, so any tag you use an attribute color="your Color Name" will be pre-processed in the build process and turned into lots of background-color and other stuff.

So I started to look for using css variables with the SASS variable, something like

:root {
  --modified-color: #333;
}
/*Declaring it here \/ or inside :root */
$colors: (
  primary: --modified-color,
  secondary: #32db64,
  danger: #f53d3d
);

But wasn't able to achieve what I wanted, or I don't know how to do it properly. With a variable maybe you could do what's in my next idea, but in a easier way.

So i thought "maybe there's a workaround" and something came to my mind:

  • You could create a class, let's call it .dynamic-bg-color.
  • Initially set it to a color you want, let's say .dynamic-bg-color: { background-color: #333}.
  • Give that class to any component you want to change, like <ion-item> or <ion-toolbar> or <button>.
  • Save this color as a string in somewhere, like a localStorage, NativeStorage, etc. (this.storage.set('dynamic', '#333'));

  • When the user picks a new color, you'll override the old color in the storage and change color for your class:

    public updateColor = (pickedColor) => { const color: string = pickedColor; // I'M ASSUMING THE PICKER RETURNS IT AS A STRING LIKE '#333333' let myTags = document.getElementsByClassName('dynamic-bg-color'); for(i=0; i < myTags.length; i++) { myTags [i].style.backgroundColor = color; // UPDATE ANYTHING ELSE YOU WANT } }

Probably you'll need to update everytime you enter a new page, since it'll generate newer tags with that class, so put a code on ionViewWillEnter so everytime he or she goes on or back to that page it updated the color.

Haven't tried this, but it's worth a shot. If you try this let me know if it worked.

Hope this helps :D

Upvotes: 2

Related Questions