How to programmatically set variables in Ionic variables.scss?

Question

Ionic comes with the variables.scss file, and there you can configure various style variables, such as primary colors, etc.

Is there a way to programmatically change the variables inside here?

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

For example: changing the primary color to the result of the color selection

Answer 1

So, I became curious and looked to see if I could find a solution, so here is what I got:

SASS, css, , color="your Color Name", background-color .

, css variables SASS, -

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

, , , . , , , , .

, " , ", :

• , .dynamic-bg-color.
• , .dynamic-bg-color: { bakcground-color: #333}.
• , , <ion-item> <ion-toolbar> <button>.
• -, , localStorage, NativeStorage .. (this.storage.set('dynamic', '#333'));

• , :

  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 } }

, , , , ionViewWillEnter, , , .

, . , , .

, : D